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

  • EZ

    Sun Jan 22 15:57:39 2012

    Been trying to figure it out for hours! Thanks!

  • Jamie

    Wed Jan 18 18:18:10 2012

    Thanks!

  • Sang Nguyen Thanh

    Wed Jan 18 05:01:14 2012

    Thanks.
    Best regards.
    Sang.

  • jimmy

    Wed Jan 4 10:01:42 2012

    great..thanks to save my time....finding this solution from long time.

  • Souki

    Thu Dec 15 16:38:36 2011

    Your are a frickin' genius sir! Thank you so much :)

  • Ken

    Tue Dec 6 23:19:28 2011

    Works awesome. Been wondering what this shifting prob was for months. Thanks

  • Stez

    Wed Nov 2 12:59:46 2011

    Thanks man!
    But the problem isn't show in Safari, only in all the other browsers

  • Ben

    Fri Oct 28 16:36:24 2011

    Thank you! You saved me hours and hours of work trying to figure this out.

  • Saidul Karim

    Tue Oct 11 11:03:39 2011

    Thanking you in advance... sick of searching and found your article. Please add more tag or keyword to your post so it become easier to find.

  • N/A

    Tue Sep 6 12:12:17 2011

    I've been wondering over this problem for ages. Don't know how to thank you.

  • Alan

    Sun Aug 7 15:08:56 2011

    Well, by golly, I went through a few pages with a few solutions to this problem, and this one worked. Thank you. -AP

  • Johanna

    Sat Jul 30 07:46:41 2011

    Thanks a lot!

  • AJC

    Sun Jun 26 19:52:09 2011

    YOU ROCK!!!!!! I OWE YOU ONE!!!!

  • Luis

    Tue Jun 21 16:57:29 2011

    Solved my issue in an instant!! Thank you very much

  • Robb

    Mon May 9 23:13:53 2011

    SO PERFECT! Exactly what I was looking for! Thanks :)

  • Tastatura

    Mon May 9 03:25:24 2011

    you helped me a lot! THANKS!

  • Frans

    Thu May 5 07:39:45 2011

    That did the job. Thanks!

  • Debra Jean

    Thu Apr 21 15:03:52 2011

    Thanks so much..... Works Great!

  • Frankie

    Sat Apr 2 13:27:56 2011

    The line - overflow: -moz-scrollbars-vertical !important;
    makes the horizontal scroll bar dissapear. Surely that's not right?

  • Stacey

    Sun Mar 20 23:44:34 2011

    Lifesaver :)
    worked perfectly!

  • Zoffix Znet

    Fri Mar 4 07:14:10 2011

    On the first page of what website? This page offers a solution - it's just one line of code.

  • webpagefunstuff

    Thu Mar 3 20:24:13 2011

    I am new at this. On the first page of the website, it says "{ height: 100%; margin-bottom: 1px; } " in the upper left corner. How do i make it go away? I copied gnidesign's solution.

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

    Thanks

  • Zoffix Znet

    Thu Jan 13 17:21:12 2011

    ASE, well, only theoretically, and it would involve JavaScript.

    A quick Google search shows me that it's somewhat possible to obtain user's scrollbar width with JS. So, what you would do is get user's scrollbar width, figure out whether or not scrollbar is visible, and if not, shift your entire site to the left (or right) for scrollbar_width pixels.

    That's too much work for so little gain that I am not even compelled to try :) If anyone dares, feel free to drop the code into comments or to me directly and I'll post it :).

  • ASE

    Thu Jan 13 09:58:07 2011

    Thanks for providing a fix to this!

    I wonder, though, is there a way to fix this problem without permanently setting the scrollbar to appear? I find a useless scrollbar on pages with shorter content to be... well, useless, and not very visually appealing.

    Is there a way to, for example, permanently shift the content to the left as though there were a scrollbar, even if there is not enough content to warrant one? That would fix the shift problem because the content would always have the same horizontal position, but the scrollbar would appear/disappear as needed. Is this even possible?

  • 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:

Support Wikipedia