What isn’t helping is that where I am located has horrible cellular coverage, and so some of the latency could be from that.
To your question, yes, sometimes on pages where there is a scroll bar, the page will load/start to load and be full-width, and then at the end the vertical scroll bar finally displays, and that seems to make things move left-right really quick.
It’s the width that “jumping”, isn’t it? The vertical scrollbar is appearing late? In those cases where images load slowly after the HTML has been loaded, both dimensions are needed so the HTML can reserve the height and width that is needed for the yet-to-be-loaded components.
The line of code that Paul suggested would be placed at the top of your common stylesheet for all pages. That would be the easiest fix for the jumpiness assuming this is indeed a problem with a slow-loading page that’s just the right height to tease the scrollbar.
These things are very difficult to nail down without seeing the problem in action. You would probably need to strip the page down until the problem goes away and then that would indicate where the problem lies.
To be honest I find Chrome continually buggy and less solid than Firefox (pages not redrawing properly, media queries not working in complex float and table situations, inline-block problems, fonts jaggy and so on…).
In general terms, though, is this a sign that I totally screwed up my HTML and CSS, or could this be just some tiny quirk like you used to get with IE6?
My HTML and CSS have grown messy over the last year or two, and while I think they are decent, probably not as clean and concise as your work.
It’s just disheartening, because I have worked so hard on this site, and now I have these couple of quirly things that jump out at me, and it makes me feel like a total failure.
That is interesting, because I feel like FireFox has went down the toilet in the last 4 years, and I finally broke down and started using Chrome which gives me half of the crashes and unexplained issues.
Funny how we have completely opposite experiences!
it’s likely that that , due to the slow connection you mentioned, page is being partially rendered before the full stylesheet loads . This effect could be compounded if you also used .js for layout purposes ( the lesson being: avoid .js for layout).
Do you get the same effect on a fast internet connection?
When a page is loading a browser has to do many things and sometimes content may need to get redrawn and re-positioned along the way. Generally, this isn’t a problem and users should expect that until a page is loaded there may be some slight movement.
Adding html width and height attributes to all images will help with this although browsers are better than they use to be at allocating the correct space.
It could be that you have inner elements that don’t fit inside their parents container causing a slight jump until the browser eventually sorts it out but without a concrete example these are just best guesses.
I find that stripping the page down is the fastest way to sort out these problems but it also needs to be done online as the latency from the server may also be adding to the problem and testing locally may not produce the same results.
Yes Firefox got bloated and crashed a lot but generally its rendering of CSS was pretty good and doesn’t suffer from the little rendering bugs that Chrome does.