[css-overflow-4] effect of gutters on viewport units

[frivoal]

https://drafts.csswg.org/css-values/#viewport-relative-lengths says:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.

This is fine if we have overlay scrollbars, and scrollbar-gutter is auto or stable, since no space is consumed for the scrollbar anyway.

This seems regrettable, but probably unavoidable, if we have classic scrollbars and scrollbar-gutter is auto, since the presence or absence of scrollbars will depend on layout, and having the viewport units depend on layout is problematic.

However, if we have classic scrollbars and scrollbar-gutter is stable (or always, which does the same thing in the case of classic scrollbars), it would seem much preferable for the viewport percentage units to be relative to the ICB as reduced by the always-present gutter.

For overlay scrollbars with analways scrollbar-gutter, I suspect it should they should also be relative to the ICB as reduced by the always-present gutter, but I am less sure, and the answer might depend on the resolution to #5253.

[frivoal]

cc: @felipeerias

[felipeerias]

@frivoal : would the both value affect this as well?

[frivoal]

Good question. I'd say yes, so that width: 100vw gets you exactly the largest size that fits without overflowing

[Sugarteeth]

I've seen things as outlandish as introducing new units to css just to avoid changing the root problems with the default implementation of vh/vw, both on desktop and mobile. Why don't we implement something like the box-sizing rule, but for scrollbars, to switch whether or not the scrollbar or chrome is considered a part of the viewport or not? There doesn't need to be a debate on how vw/vh should work if the individual user can decide for themselves.

Call it something like "viewport-box" maybe, and have the options be like "chrome-(inside|outside), scroll-(inside|outside)", with chrome-ouside & scroll-inside being the default as it is now. No worrying about backwards compatibility, just make the current implementation the default and put the onus on the user.