[css-values] Use of 100vw is causing pointless horizontal scrollbars on some websites · Issue #6026 · w3c/csswg-drafts (original) (raw)

Windows users and macOS users that have enabled “Show scroll bars: Always” are seeing pointless horizontal scrollbars on some websites that use the 100vw value. One common use-case for 100vw are full-width elements:

.full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

Examples:

• https://timkadlec.com/remembers/2021-01-26-what-about-ember/
• https://blog.maximeheckel.com/posts/the-power-of-composition-with-css-variables
• https://fugu-tracker.web.app/
• https://ourworldindata.org/coronavirus/country/germany (screenshot)
• https://www.monotype.com/fonts/helvetica-now-variable (screenshot)

If you can’t check for yourself and are not sure what a pointless horizontal scrollbar is, watch this video that I posted on Twitter.

The authors of these websites are most likely not aware of this issue because they developed the website on macOS with default (overlaid) scrollbars, where this issue does not occur.

As a result, many people are experiencing these pointless horizontal scrollbars, and a fair share of these people probably find them annoying (raises hand 🙋‍♂️).

Does the Working Group consider this to be a problem that requires an intervention? Are there any proposed features or changes that could help make this problem go away over time?