In Firefox and Safari, pages that are centered move a few pixels when the page is long enough for the scrollbar to appear. If you navigate through a site that has long and short pages, the page seems to "jump" around.
IE7 tends to leave the scroll bar visible all of the time but disables it when the page is not long enough. Since the width of the HTML window never changes the centering of the page doesn't change.
Is there a workaround or a way to style the page so it doesn't jump around in Firefox and Safari?
Thanks.
"On Windows, Firefox follows the system preference (System Preferences > Accessibility > Visual Effects > Always show scrollbars)."
The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.
The Best Answer is. You can use the scrollbar-width rule. You can scrollbar-width: none; to hide the scrollbar in Firefox and still be able to scroll freely.
You could simply always enable the scrollbar:
html{
overflow: scroll;
}
but that would give you the horizontal scrollbar too, this is better:
html{
overflow-y:scroll;
overflow-x:auto;
}
That will give you only the vertical scroll and the horizontal when needed.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With