12

In Firefox and Safari, pages that are centered move a few pixels when the page is long enough for the scrollbar to appear. If you navigate through a site that has long and short pages, the page seems to "jump" around.

IE7 tends to leave the scroll bar visible all of the time but disables it when the page is not long enough. Since the width of the HTML window never changes the centering of the page doesn't change.

Is there a workaround or a way to style the page so it doesn't jump around in Firefox and Safari?

Thanks.

1
  • I was also affected by this in IE8 and Chrome12. Not sure i like the permanent scrollbar solution though.
    – Cojones
    Jun 19, 2011 at 21:56

2 Answers 2

13

You could simply always enable the scrollbar:

html{
 overflow: scroll;
}

but that would give you the horizontal scrollbar too, this is better:

html{
   overflow-y:scroll;
   overflow-x:auto;
}

That will give you only the vertical scroll and the horizontal when needed.

2

This site contains a javascript to fix the problem which is a better solution IMO than the current one (a permanent scrollbar):

http://www.johnpezzetti.com/2011/01/31/removing-vertical-scrollbar-jump-shift-problem-a-javascript-fix-for-all-browsers

This script waits until the DOM is loaded then checks to see if a scrollbar is active. If it is, it calculates the width of the scrollbar and sets the body’s marginLeft equal to that width. This offsets the shift, and since it runs on DOM load it takes instant effect.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.