Have you ever created a fixed width center aligned website with CSS only to encounter the FireFox jumping bug? This bug only occurs if you are navigating from a page with no vertical scrollbar to another with one.

The jumping bug

The vertical scrollbar placeholder only appears in FireFox when your page needs scrolling. When navigating from a page which doesn’t require scrolling to one which does, it will re-position the page to center it. As a result, it would seem that your page is jumping. Though not a major glitch and something your site can live with, it makes your user experience rather edgy. We would very much prefer a smooth transition from one page to another, now would we?

In contrast to FireFox, Internet Explorer does not have this problem. Irregardless of whether a page needs scrolling or not, the scrollbar placeholder is already positioned there and the scrollbar comes into play only when needed. Thus it eliminates the need for a page to be re-positioned. This is by no means giving IE the title of the better browser, FireFox for me is still at the very top of the chain.

The fix

The way to get this bug out of the way would be to tell FireFox to always have a scrollbar placeholder ignoring whether or not the page needs scrolling. To do that, set the overflow property for the html tag to scroll.

html {
        overflow-y:scroll;
}

As this fix is only valid CSS 3, you could opt to set a minimum height:

html {
        min-height:101%;
}

This should be the base of all your future fixed width center aligned websites with CSS.