hasLayout.net

Share |

Fixing "Page Shift" Problem

Description

Tutorial for fixing the "page shift" problem that happens on loading pages of different lengths or when page's length changes with scripts

Date of the Tutorial

Tue Aug 18 18:56:03 2009

Overview

In this tutorial I won't be covering any "break-through" methods. I will talk about a problem about which a lot of people seem to ask and I finally got sick and tired of explaining what is going on and how to fix it.

What's Going On, Man?

You are working on the site and then you notice that when you click through several pages the site shifts horizontally by several pixels and you wonder wtf is up. The answer is: scrollbar.

The shift happens when you click from page with little content (no vertical scrollbar) and land on a page with lots of content (vertical scrollbar appears). The problem becomes more apparent when you have some nifty-crifty scripts on the page that hide/show large piece of content and, depending on the state, the scrollbar appears and disappears.

Chances are you won't notice that in IE6 and IE7 because by default it got the "fix" already in place.

Here's a demo with a scripted button that hides/shows large chunk of text demonstrating page-shift problem.

Overflow The Solution

The problem happens because in [most] browsers the overflow on <body> element is set to auto, thus the scrollbars are visible only when there's enough content to require them.

What we will do is change the vertical scrollbar to always show with CSS3 overflow-y property. Note: this property exists in CSS3 and therefore will not validate using CSS2.1 validator profile - just ignore the error. Let's have a look:

The fixed demo is shown on a separate page.

CSS Code:
html {
    overflow-y: scroll;
}

Not much to it; overflow-y set to value scroll on <html> element causes [modern] browsers and IE to always display vertical scrollbar, effectively elimitating the "page shift" problem.

If you are wondering why in the beginning I was talking about overflow on <body> element, yet we are setting it on <html> element, then I would recommend you to read Section 11.1.1 of CSS 2.1 Specification along with my "IE 6 and 7 Document Scrollbars Overflow Inconsistency" write up. Enjoy!

Comments

Create new comment

  • Valerie

    Wed Aug 11 01:54:03 2010

    Awesome! The shift was so irritating!

  • Rob

    Tue Jul 13 12:56:57 2010

    Best... tip... ever!

    Thanks man!

  • felipe

    Thu Jul 8 13:22:24 2010

    WORKS ON IE8!!!!
    BEST SO FAR

  • LT

    Tue Jul 6 22:11:54 2010

    Thank you so much! I thought there was something wrong with my CSS until I did a google search and discovered this is a common issue with pages that have shorter content.

  • gnidesign

    Thu Apr 15 22:14:26 2010

    Here is the full code that is working in Firefox 3.0 to 3.6.3 and in IE6 - IE8 thanks for your help!

    filename: styles.css

    /* eliminate page shift */
    html {
    min-height: 100%;
    margin-bottom: 1px;
    /* For Firefox 3.5 or later */
    overflow: -moz-scrollbars-vertical !important;
    overflow-y: scroll;
    }

    filename: styles-ie.css

    /* eliminate page shift */
    html {
    min-height: 100%;
    margin-bottom: 1px;
    overflow-y: scroll;
    }

    Cheers!
    Bill

  • Roman

    Sun Mar 21 15:09:15 2010

    Thanks a lot! I fixes problem for all browsers.

  • Calvin

    Wed Mar 17 22:39:12 2010

    Cool, Thanks for the tips

  • Pierre

    Sat Dec 26 05:47:00 2009

    Thank you very much for this !

  • Stephanie

    Fri Nov 27 13:43:36 2009

    Thank you sooooo much....Great suff!!!

  • Derms

    Fri Oct 16 15:29:29 2009

    Wow! Thank you so much for this. It was driving me crazy.
    Everything worked great in Chrome and Safari, but would act up in Firefox 3 and IE8.
    This did the trick!

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: