January 2, 2006

Battle of the Scrollbars

I just noticed something I previously missed. IE/Win handles scrollbars differently—and I think better—than its betters (Mozilla, Safari, Opera, etc.). This is a first: me preferring IE/Win.

It's funny how I discovered this. A client wrote saying that certain pages on his site were wider than others. In keeping with his status as a good client, he wanted to know how much I would charge to make all the pages the same width.

As I do in such cases, I figured one of three things was happening:

1. The client was wrong to think there was a problem.
2. The client changed something to cause the problem.
3. I fucked up.

Naturally I hoped the answer was #1, as this is always the best outcome.

I got my wish this time. My client's mistake concerned the affect of scrollbars on centered sites. He failed to notice that the "wider" pages weren't wider but shorter—so short that they didn't require a vertical scrollbar. This vertical scrollbar, when it appears (which it only does on pages whose content exceeds one screenful), occupies 14 pixels along the right-hand side of the window. In its absence, the available space (technically, the viewport) is 14 pixels wider, which causes centered pages to "slide" seven pixels to the left as compared to longer pages.

I'm doing a crappy job explaining this, so here are some visuals:

Example 1: A centered page that's short and has no scrollbar

Example 2: A centered page that's longer and has a scrollbar

It's a little difficult to see at this size, but note how the page in Example 2 centers in a skinnier space than the page in Example 1, because of the presence, to the right, of a 14-pixel-wide scrollbar. In effect this scrollbar pushes the page seven pixels to the left.

In sum, my client was wrong to believe that certain pages were wider than others; instead they were centered in different-sized spaces depending on the absence, or presence, of a right-hand scrollbar.

Which brings us to IE/Win. In checking my client's site there, I noticed something surprising: IE/Win includes a scrollbar on all pages. On short pages the scrollbar lacks the little widget that slides up and down, but otherwise it looks like a regular scrollbar. None of the other popular standards-compliant browsers include this default scrollbar. And while I doubt that anyone's life will be changed because of it, I think it's smart. Certainly it's handy for centered sites. Granted, it means that short pages have 14 pixels less horizontal space in IE/Win (as opposed to, say, Firefox), but what's the use of 14 more pixels if they're taken away on longer pages?

You go, IE/Win. You are a piece of shit and I hate you, but today you rule.

Published in Browsers, CSS, Design, Web Standards