width:100VW Side Scroll bug (& fix)

If you visit this page on desktop, you most likely experience a slight side scroll bug.

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 bug

Elements sets with width:100vw don't have the same width than elements with width:100%.

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.

The test

Click on the Switch... button to cycle through width:100% and width:100vw.

This section is set to

Inducing no side scroll

Inducing side scroll

Switch between 100VH and 100%



The fix

As shown below, a width:100% element will extend across the viewport but will always stop at the scrollbar.
Try to reproduce this bug and see if your users experience it. Use the vw unit wisely