Skip to content

Stop Jumping! Or How to Eliminate Horizontal Shifts in Firefox

8 Feb 2008

An observant visitor to my site pointed out a couple of the pages shift about 10 pixels to the left. When I checked these pages, lo and behold, the contents did jump a little. (I noticed it before, but I thought it was just my imperfect eyes playing tricks on me.) Stranger still, this horizontal shift only happens in the Firefox browser. Color me perplexed.

After way too many clicking back and forth between the pages, I noticed something significant: The shift only happens on pages with a short amount of content.

It took a little more figurative head scratching (yes, I’m slow) before the lightbulb lit up: It was the scrollbar!

“Huh?” you say.

Well, I center my pages by setting left and right margins to auto so they will always position themselves in the middle of the browser. If the pages are long enough to require a scrollbar, they shift to the left to adjust to the decreased browser viewing width.

Now, there are a number of work-arounds:

  • Make the short pages longer. I initially chose this option, but not all users have the same monitor size.
  • Uncenter all the pages. I dismissed this option as soon as I thought of it.
  • Force a scrollbar to appear even when it’s not required. Ding! Ding! Ding!

To do option 3, I added the following to my CSS:

html {
    overflow-y: scroll;
}
Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: