Here is a tricky question to diagnose, but here goes…
I just finished a client’s website and I have noticed that several pages have this annoying “page jog” (i.e. page moves to right then back to the left quickly) when they load.
Unfortunately I am not authorized to post code or even a link here.
It is my hope that there are some common “gotchas” that might cause such behavior.
I do most on my testing on a Mac and using Chrome.
Any insight?
Does this happen when a scroll bar appears?
Include width and height attributes in forground images.
Maybe it’s the vertical scrollbar popping in and out.
Try:
html {overflow-y:scroll}
That will ensure the vertical scrollbar is always in place by default and is often the cause of page jumping.
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.
Do I just add that as a single style?
Or is that supposed to go in every web page?
Depends; do other pages exhibit this behavior?
There’s nothing wrong with adding that as a global style so you can add it on every page if you want.
The markup for my images is stored in MySQL and includes just the height.
<img src="/images/acme.png" width="100" alt="" title="" />
Isn’t that good enough?
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.
I added the style you recommended, and it seems to have helped, but what is ironic is that things work better in FireFox - of all browsers - but things are still jumpy in Chrome?~
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…).
Yes, I may have to do that.
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?
It depends on what is causing the problem.
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.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.