[csswg-drafts] [css-values] Use of 100vw is causing pointless horizontal scrollbars on some websites (#6026)

simevidas has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values] Use of 100vw is causing pointless horizontal scrollbars on some websites ==
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:

```css
.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://fugu-tracker.web.app/

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](https://twitter.com/simevidas/status/1363019736896921604).

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 a intervention? Are there any proposed features or changes that could help make this problem go away over time?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6026 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 22 February 2021 00:00:38 UTC