Layout glitches when switching between short & long pages

Let’s see if you recognize these symptoms.

Say you open a web application. It’s content vertically fits in the viewport. So there is no need for a scrollbar, and your browser doesn’t display it.

Now you open another page in that web application. It is a long page, doesn’t fit in the viewport all at once, so your browser shows a scrollbar.

By showing that scrollbar, your page got a bit smaller. The content on that page was positioned in the middle of the page. By showing the scrollbar, the content moved a bit to the left.

Now consider the case where the web application is reasonably fast, and you click around reasonably quickly. This gives a glitchy feeling, to me at least, of the content consistently moving around a bit.

Solution

The solution is easy, and I’ve been adding it to all the web applications I’ve been making. It’s the following CSS:

html{overflow-y:scroll}

Now the scrollbar will always be displayed. If there is nothing to scroll, it’ll be disabled, just like you would expect. On Mac OS X, the default scrollbar style seems to be to not even show a scrollbar if you’re not near the scrollbar-area or scrolling with the touchpad or a mouse, so you don’t even notice!