width:100VW Side Scroll behavior (& fix)
If you're visiting this page on desktop, you may experience a slight side scroll bug and see an horizontal scrollbar at the bottom of the browser canvas.
Depending on how you set the scrolling preferences of your OS, and what pointing device you're using, an element with width:100vw can extend below the vertical scrollbar of your browsers, inducing the apparition of horizontal scrollbars along with an unwanted side scroll.
The behavior
Elements sets with width:100vw don't have the same width than elements with width:100% as soon as the content of the page exceeds the height of the viewport.
Hello world
width:100%
= 250px
width:100vw
= 250px
When the content fits in the height of the viewport, width:100vw and width:100% behave the same.
Hello world
width:100%
= 230px
width:100%
= 230px
When the content doesn't fit in the height of the viewport, and if there's no element with width:100vw, the vertical scrollbar is triggered and the width:100% sections are shrunk.
Hello world
width:100%
= 230px
width:100vw
= 250px
width:100%
= 230px
When the vertical scrollbar is triggered and there's a width:100vw element, a side scroll is induced and the horizontal scrollbars are triggered too.
MacOS Show scroll bars settings, set by default on Automatically… will provoke that unwanted scroll. Set on Always will do too.
Do you experience that bug?
This page contains a width:100vw element, check if is inducing the bug in your browsers.
