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

> > Now comes the part where authors might get tripped up: if they then size something inside that  to be 50vw, they will end up with a horizontal scrollbar again, as the computed width is 492px and not the leftover 476px.
> 
> ([#](https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1834696746)) I'm confused. That would happen _regardless_ - if the 50vw-wide div has scrollbars, its inner width is going to be less than 50vw no matter how we define vw.

I know that will happen regardless, but it might trip up authors as `vw` on root does account for the root scrollbar but when used elsewhere it does not take the (direct) parent scroller’s scrollbar into account.

That confusion could be solved by doing something similar for `cqi`/`cqw` under the same conditions [which I also suggested](https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1833818113)) and @mirisuzanne [also hinted at this before](https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1163438639).

_(This looks like food for a follow-up issue)_

> > A solution with an envvar would allow fixing all those cases, but puts the burden on the author to take it into account.
> 
> ([#](https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1834696746)) Also not sure what you mean here. How would an env() make this case work?

The `env()` proposal would allow authors to manually take the size of the scrollbar into account. It is a fixed value that represents the default scrollbar size. This would work for both the viewport and containers.

```
width: calc(100vw) - env(scrollbar-inline-size);
width: calc(100cqw) - env(scrollbar-inline-size);
```

This mimics what [authors are currently doing](https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1832490269), with the different that the scrollbar-width is reported by the browser here.

But, as @emilio [mentioned](https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1713351193), this would also require a way to detect classic scrollbars. It would also require a way to detect if something is scrolling or not … which would make this all very complicated for authors to implement, as demonstrated in [this snippet](https://gist.github.com/bramus/bcca5788d8ced82837180b7a15760c84) I presented at the 2023 summer F2F.

So yeah, maybe this `envvar()` route isn’t the preferable path indeed … too much jumping through hoops.

---

Winging back to @bfgeek’s [concern](https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1832490269): I’ve asked some colleagues to query the HTTP archive to see:

1. How often the `width: calc(100vw - var(--scrollbar-width))` pattern is used.
2. How often `overflow: scroll` or `scrollbar-gutter: stable` on the `:root` is used.
3. How often both are used together

I’m still waiting on the results of these queries.

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1845299214 using your GitHub account


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

Received on Thursday, 7 December 2023 12:58:54 UTC