The first time I go to this page, the positioning of the slideshow (developed using the JQuery cycle plugin) is all messed up, like this:
If I then refresh the page, it displays correctly, like this:
How can I ensure that this page displays correctly the first time it's viewed? The incorrect layout seems to happen more often with Chrome than with other browsers, though as you can see from the screenshots above it also happens with other browsers.
Thanks,
Don
Add width and height attributes to the images.
I'm guessing that the JavaScript activates before the image is loaded, it then does a couple quick computations to get the dimensions it needs, and locks them in place; all of this happens before the image is loaded and since there are no width or height attributes, the dimensions come out way off. On the reload, the image comes out of the browser cache so the dimensions are known when the JavaScript runs.
Your JavaScript runs when the DOM is ready, not when every single thing has been fully resolved and loaded. You could also try binding your slideshow to the load event rather than document.ready.
You see this in Chrome more than other browsers because Chrome is really fast and that magnifies the timing issue.
Related
First of all, let me explain what I mean by "smooth scrolling" here. When I rotate the mouse wheel by one "step", e.g. on Google Search results page, the page gradually moves up/down - the transition from the "before scroll" to "after scroll" states takes some time and is nicely animated. However, whenever I create a long page in html and try to scroll just one "step", there is no animation or transition on scroll - the page just instantly jumps few lines up or down. The average repaint time of my page takes about 5ms, with peaks up to 8ms, so I know repaint time is not the cause of that.
I know that such smooth scrolling can be achieved without any scripting, as for example the site http://www.thecssninja.com/ scrolls super-smooth on Chrome even with js disabled.
Why does Chrome choose not to scroll my page smoothly? How do I achieve smooth scroll without depending on JS, as CSS Ninja manages to?
PS Firefox does not seem to have that issue. How do I tell Chrome with my html/css that I'd like my page to scroll smoothly?
Either you can enable chrome smooth scrolling manually, which does not make sense for website development.
Or you can use some of the libraries to achieve that.
https://github.com/fatlinesofcode/jquery.smoothwheel
Sadly for chrome you cannot enable smooth scrolling through HTML, CSS or JS.
I know you're not after JS solutions, but I've never seen anything guarantee this outside of JavaScript, and karan's link above is certainly the smoothest example I've seen of doing this.
(Proviso: I'm using Chrome for Windows, not Linux. Apparently, that may make a difference.)
I use Chrome myself, and I always get the pages scrolling in jumps, not smoothly--even the pages you described as 'smooth' above step for me several lines at a time, including the Google results page. There used to be a flag available for this in Chrome, which allowed you to turn on smooth scrolling -- it could be accessed through Chrome's flags (go to chrome://flags/ to see those that are available) -- but it's now only available for the Linux Chrome platform. It may be available again in the future, but for now at least, it isn't. Hopefully, though, these experimental features will eventually find their way into Chrome, and render this whole issue obsolete.
Firefox, on the other hand, scrolls in nice smooth steps no matter what page I'm on--including my own local info pages which have almost no styling at all. IE scrolls smoothly, though not nearly as nicely as Firefox, while Opera behaves like Chrome, and steps through the pages several lines at a time.
I'm pretty sure that this is an issue to do with the browser, and not something that you can currently remedy with styling alone. Sorry I couldn't be of more help, but if you're doing this for a client, at least you'll be able to explain the issue.
I would highly recommend finding an alternate solution, but I have managed to find a solution to this exact problem for one of my websites. Akin to just using glitter glue to solve a leak in a wall, I discovered that including an iframe for a Google map on the page (even if it's hidden) somehow added in smooth scrolling. I have no idea how it works, but for some bizarre reason it does.
As I said though, I highly recommend not doing this, as its an extra (and sometimes lengthy) request made on each page to include an element most users won't ever see.
Background info: I'm working on a public facing website for our company. developing in VS2012, asp.net and vb.net, using some JS, some JQuery, and a decent amount of CSS.
Everything was looking great in our internal testing, until someone checked from home, where they only had IE 9. Suddenly, big chunks of text within expanding panels weren't being displayed, the bottom of the page was missing in most cases, some links that call javascript functions don't do anything... It's so random that the only reason I think they're connected is that it only happens in IE9 (or probably before, though no one has looked.)
I tried setting the standards mode to edge in the web.config. (tried setting it to IE10 as well, just to try) I've played with changing some positioning, heights in px instead of %, relative to fixed positioning, tried inserting the html5shiv, removing the gradients... nothing has changed. Everything displays correctly, until it doesn't display at all. When I was starting to see and research this last week, I thought I'd found an article somewhere that said there were limits on the CSS tags you could use in a page for IE9, but that number was WAY higher than anything I'm using, including both what's on the page directly, and incorporating the .css file. The only other clue is that it looks like at the bottom, where the missing stuff starts, I also lose the gradient from the page background (so just a block of all white, however if I play with the size of the window, sometimes I can get this block to slide down, and I can see another line or two that was originally hidden...
Has anyone had issues like this? The site works perfect in chrome, ff, IE10 and 11, several Linux browsers, opera, safari, from macs, pcs, and Linux boxes. everything except this old IE 9.
HELP?
Just a little hack fix I found, if anyone comes across this question looking for similar answers... I created a new css file implemented when IE9 browsers are detected, and I extended the min-height for the content of pages until every page displayed... the drawback is that on those longer pages, if the content isn't expanded, the footer still lies several scrolls down... but this only happens on the very content-lengthy pages, so while it isn't ideal, I guess it's good enough, if someone's ok with using outdated browser technology :/
I've got a little problem with one of the sites I've developed. The problem is quiet simple, however the solution seems to be a bit harder.
The problem
The problem is that the page is being rendered as it should be on a mobile device at first, but right after the pageload is finished, the page resizes to fit the viewport. Nothing strange, this happens at almost every non-responsive website. But the strange thing is that only 75% of the available width is being used.
I already compared the based/sliced version of the design with the production version. The based version does render as it should (100% width). I've tried to spot the differences in the CSS, but I can only find a couple, I tried resetting those, but that didn't work.
Also, I've tried to disable the javascript (it's only Lightbox and 1 JqueryUI "AddClass" effect). The javascript effect has only 1 task: after pageload the header will be resized from 480px to 220px height. There are no changes being made to the width of any element on the page.
Last but not least I started Adobe Edge Inspect and took a look on the pagesource of the mobile device. But unfortunately I can't spot any element on the page that exceeds the width of the "body" tag. The only one exceeding the width is the header image, but the image is within a div (100% width) with overflow:hidden
Based and production version
If anyone would be so kind to take a look at what messes up the rendering, that would be awesome. I can't seem to find out what is causing the issue.
Based (working): http://www.nambi.nl/lefunq/
Production (rendering at 75% width on mobile): http://www.lefunq.com/_index.php
Thanks to everyone who takes the time to look into this issue.
Your problem was caused by the facepile code:
<div
class="fb-facepile"
data-href="http://www.facebook.com/pages/Le-Funq/113332665510819"
data-size="large"
data-max-rows="1"
data-width="450"
></div>
More info:
As soon as the facepile cannot be loaded due to the invalid login, the page becomes resized. As soon as I log in to facebook and the facepile is shown, the page is stretched the way it should. I just have to find out what is causing the weird scaling, because if there's no facepile, it's a 0x0 div/iframe, etc.
Solutions:
I have tried a couple of things. Onload or Onready events, and hiding or removing the facepile code. In the end, neither of these options worked. The scaling happened before the facepile was loaded completely. The final solution is a javascript workaround, checking if there's a mobile device, if so, then disable the facepile code:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) == false ) {
document.write('<fb:facepile href="http://www.facebook.com/pages/Le-Funq/113332665510819" size="large" max_rows="1" show_count="false" width="450" class="facepile"></fb:facepile>');
}
I found the way to detect if the browser is mobile in this answer:
What is the best way to detect a mobile device in jQuery?
I tried native browser, Firefox and Dolphin on Android 2.3.7.
Both pages render at 100% zoom, and the zoom does not change after the page is loaded completely.
I believe this problem is specific to the software of your device.
Working on an image heavy website, discovered a strange bug(?) in Firefox. Any CSS background properties are rendered onto transparent png's. It occurs after the initial render, during the cache refresh. This appears as a flicker if you're using broadband but becomes extremely noticeable as you scale down bandwidth.
General progression of the issue seems to be:
Page and images rendered from cache
Firefox removes the cached images.
Firefox begins to reload images but displays a box with the CSS properties of the background.
I've recreated a (hideously colorful) example, but you may need to use fiddler, or another program with bandwidth throttling/emulation to see anything more than a flicker. Obviously, you'll also have to load once and then refresh to experience the error. And again, it's only in Firefox.
I have tried a plethora of various suggestions, none worked. Just need a fix, hacks will work as long as they don't effect other browsers.
EDIT: Here's a video so you can see it in action.
Since I cannot recreate the issue on my Firefox (10.0.2) on my computer (Win 7) with my particular hardware (which may or may not be a part of this problem), I offer the following as a guess at a solution, though one I would have assumed you tried already.
Target your img tags (preferably with some css more specific than below) that you have the issue with and try setting one of the following:
Either:
img {background-color: transparent;}
Or:
img {background-color: transparent !important;}
Update: Another Possible Workaround
Have javascript make the relevant img tags invisible to start and also bind an event to them so that when they load, they become visible again (JQuery example):
$('img').css('visibility', 'hidden'); /*not using "display" keeps layout*/
$('img').bind('load', function() {
$('img').css('visibility', 'visible');
});
I cannot test the above, so no guarantee it will work, but is another idea.
Is there a major performance difference between the following:
<iframe style="visibility:hidden" />
<iframe style="width:0px; height:0px; border:0px" />
I'm using a hidden iframe to pull down and parse some information from an external server. If the iframe actually attempts to render the page, this may suck up a lot of CPU cycles. Of course, I'd ideally just want to get the raw markup - for example, if I could prevent the iframe from loading img tags, that would be perfect.
I think either way your iframe is going to load it's contents. You can do a simple test by hiding and then showing the iframe with a page that takes a while to load.
If the iframe (when made visible) immediately shows the long loading page, you'll know it was already loaded in before the show.
If you're using FireBug then you can use that to look at the HTTP requests made. This will show you whether there's a HTTP request made by the iframe.
As far as performance differences, I doubt there's any between the two pieces of HTML you posted. If anything I'd say that setting visibility to hidden will be more "efficient" since the browser doesn't have to wory about rendering anything visually, even if it is 0*0px.
Still, I don't think there's any real performance difference and especially no major performance differences.
Update:
I just tested in FireBug to see if the iframe still loads its contents when set to visibility:hidden, display:none; and with it's height and width attributes set to 0px and in all cases, the iframe contents was loaded.
Visibility:hidden will probably be more performant, as Browser doesn't have to recalculate, -layout and -paint. The element will just not be drawn at all, without even checking it's layout.