Firefox Scrollbar 'jump'

Working on a project today, I encountered a problem which has bugged me for ages when developing layouts using CSS for Firefox browser.

In Firefox, the scroll-bar only displays if the content takes up more than 100% of the browser window height. This proves a problem when switching between pages that do not take up 100% and pages which do - it causes the page to appear to 'jump', as Firefox adds the vertical scroll-bar to the right.

This is not a problem using IE, because the scrollbar is always visible, whether it is in use or not.

To overcome this problem is quite simple. We add an html rule to our CSS document as below;

html { overflow: -moz-scrollbars-vertical; }

This tidy little one liner will now display the scroll-bar in FF whether it is in use or not, preventing the page from giving the 'jump' effect.

Alternatively you can apply the following;

html { height: 101%; }

This tricks Firefox into reading that there is 1% more vertical space at the bottom of the page and therefore will display the vertical scroll-bar.