Stopping Browser Shift
When creating a fixed width site that is centred in the browser occasionally you might notice an odd behaviour where the site slightly shifts to the left or the right. This is caused because some modern browsers remove the scrollbar when the page doesn’t require it. So if your site moves from a page that requires a scrollbar to one that does not it causes a slight shift when the scrollbar is removed.
Here is a solution to fix the shift by making all the pages display the scrollbar, even when it isn’t required.
Place this into your css:
html {
height:100%;
margin-bottom: 1px;
}
Basically what this does is give the page a height of 100%, but then adds a 1px border after it, so really your page has a height of 100%+1px. This will mean that a scrollbar is always needed for that 1px should your content not need to scroll itself.
Issues
Although this will fix the shift, it does so by making the pages always scroll, this can be seen as a usability issue as you are forcing a page to be larger than it needs to be and as such affecting the way the browser was built to work. So if it doesn’t bother you too much, after all it is just a couple of pixels, then it is best to not bother with it and allow the browser to function the way it was meant to.
twitter
forrst
google+
Rss
4
Comments
I hate it when sites jump about when navigating around, I use the following css to force the scrollbar…
html { overflow: scroll; }
That is a nicer way of doing it, don’t know why I haven’t thought of that one. Thanks Gavin :tup:
html {overflow-y: scroll}
also works
Why do designers feel the need to change the way the browser functions, the browsers do it for a reason!