[css-values] Should viewport units still depend on scrollbar width for overflow:scroll?

[dbaron]

Right now the definition of viewport units says that they shrink for scrollbar sizes when overflow on the root is scroll (which is quite rare, since it's not the default), but not in other cases.

Apparently Gecko is the only engine that implements this, and we're wondering whether it's worth the work to maintain that implementation when it seems like nobody else is going to.

Are other engines planning to do this?

[dbaron]

(The Gecko bug in question is bug 1393603.)

[tabatkins]

It's literally the only way to get accurate viewport units in the presence of a root scroller. Use of vw is relatively rare in the first place, and most of the time people don't need precise values, but I suspect there's a subset of authors who are annoyed at 100vw not being the width of the layout area in some browsers.

[tabatkins]

I just asked our relevant implementor (@bokand) for our impl plans.

Here is an example showing off the functionality - in Firefox all 10 floats correctly sit on the same line, but in Chrome the 10th one wraps to the next line.

[emilio]

The problem is that this introduce styling state that depends on other styling state. In particular, changing the overflow on the scroll root would mean recomputing every viewport unit in the document (even the ones higher up in the tree!).

Gecko relied on reconstructing the whole layout tree when this happenned, which happened to restyle the whole document.

As can be seen in http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=5339, this is now broken since the optimizations in https://bugzilla.mozilla.org/show_bug.cgi?id=1344398 landed, and on the new style system, which decouples styling from layout tree building, it's similarly broken.

[tabatkins]

(even the ones higher up in the tree!).

This only applies to the root scroller, so at max this means you might be able to change it on body and have it affect html (is that right? I forget what all the complexity around root scrollers means). Blame ancient browsers for screwing up "which element styles the canvas/window?" so bad. ^_^

Aside from that one bit of body->html jumping, this is otherwise identical to recomputing em units based on a font-size change. Which, I know, requires some complexity to handle in a performant manner, but is a proven mechanism at least.

---

And again, coming at it from the author side rather than impl, not doing this means that it is impossible to write something that wants to be a % of the viewport when scrollbars appear. That sucks, it's the sort of "are you kidding me" moment that super-frustrates authors. It makes viewport units just a broken feature (since scrollbars are, after all, the rule on pages, rather than the exception).

[litherum]

This is a perfect use-case for the variables-that-don't-vary-except-they-do-sometimes proposal that Dean proposed at the Paris F2F.

[tabatkins]

By "perfect use-case" you mean "let the viewport units continue to be broken, and assume that authors will be able to write code that listens for viewport-size changes and updates a const-var every time it changes"? Can you even write the code for that? I'm not sure how to do it, at least.

[css-meeting-bot]

The Working Group just discussed Should viewport units still depend on scrollbar width for overflow:scroll?.

The full IRC log of that discussion

<dael> Topic: Should viewport units still depend on scrollbar width for overflow:scroll?
<tantek> because: <dael> jensimmons: I'm fine punting to next week.
<dael> github: https://github.com//issues/1766
<dael> astearns: We're waiting on impl feedback?
<dael> TabAtkins: Yes, I'm getting ?? to comment.
<zcorpan_> (Could css-meeting-bot remove the label when it's commenting?)
<astearns> it does when we resolve something
<dael> dbaron: I reised this bc gecko was the only engine that impl when we decided this years ago. It's apperently harder to do on silo. I think it's reasonable on their part.
<dael> myles: If all browers except Moz ones don't support and MOz wants to remove it seems clear
<dael> TabAtkins: Without this feature there's alot of cases where viewport is broken. THere are plent that do, but I suspect people are avoiding these thigns. You cannot get 100vw to be the size of the screen. THere's usually a scrollbar and 100vw is too big.
<dael> myles: The desc says it's only on sroll not auto
<dbaron> s/silo/stylo/
<dael> TabAtkins: We decided viewport should be resolved at computed. For overflow auto we decided to ignore scrollbar, but w wanted to pay attention when it's there. overflow:scroll causes a scrollbar so we set it to take scrollbar into account in that case.
<dael> myles: Overflow:Scroll on root is not common case
<Florian> q+
<dael> TabAtkins: I agree. But when your scrollbar appears your items to 100vw will overflow horz and cause a scrollbar. The way we decided to let tha tbe solve dyou can set overflow scroll on it explicitly so it fits. Without this viewport units are just broken. The only time they add to the viewport is when you have no scrollbar which is uncommon
<dael> fremy: You still need to know size of scrollbar. It's not a static number.
<dael> Rossen: We're talking about uint value. I'm with TabAtkins. If in the case of overflow: scroll when scrollbar takes spec away from viewable viewport current spec mandates the correct behavior from user PoV. viewport should resolve to are-scrollbars.
<dael> Rossen: Changing spec for interop and going aaginst what makes sense isn't best.
<astearns> ack Florian
<dael> Florian: If we don't drop the thing should we extend it? Even if it's auto?
<dael> TabAtkins: Prob should. Assuing whatever element applies to root scroller. If that works and we define how that would help.
<dael> Rossen: I would argue against that. THe elemnt causing the scrollbar could be defined in vh unit which causes scrollbar and introduces a dependency. IN the case of overflow scroll on the viewport we only need to add computed value and resolve overflow for the root. From there on decide what he value will be.
<dael> fantasai: No one is suggesting auto for scrollbar. There's a scrollbar gutter property that adds extra space.
<dael> Rossen: I was reading the minutes from Florian about perhaps extending to auto.
<Florian> https://drafts.csswg.org/css-overflow-4/#scollbar-gutter-property
<fantasai> Florian was asking about scrollbar-gutte rproperty
<dael> TabAtkins: It's only when you ahve a predicatble value to auto
<fantasai> s/should we extend it/should we extend it to handle the scrollbar-gutter property/
<dael> Florian: Even though you get that you get a predictable size with space reserved but not scrollbar so maybe that shouldn't count. I don't know.
<astearns> q+
<dael> Rossen: Let's assume simple l to r. Whatever an element with abspos top 0 right 0 wherever that positions to shoudl be extent of vh
<dael> TabAtkins: No because then by default auto changes value of vw unit and that defets the computed value time purpose
<dael> Rossen: No in the cae of the gutter we're talking about the prop reserving space for gutter
<dael> TabAtkins: If gutter is predictable yet
<dael> Rossen: That's what I'm talking about. So if abspos items are positioned to gutter this should be extent of vh as well?
<dael> Florian: I don't think we explicitly define it may fall out of the wording, but I don't htink that was concious decision.
<dael> Florian: I don't think we decided on that
<dael> astearns: Is that enough on the gutter sidebar?
<Rossen> q?
<dael> Florian: I think we need to come back, but not for this call.
<dael> astearns: I want to go back to the discussion before gutters where...I agree that vw should take the scrollbar into account where it exists. But the one piece of impl feedback on that is it's really annoying to have to layout arbitrary things when you gain a scrollbar. Would it make sense to define auto same as scroll case for vw? It's always taking into case poss scrollbar?
<dael> TabAtkins: If you have overflow: hidden on root vw doesn't stretch all the way across the screen.
<dael> Florian: Just auto.
<dael> TabAtkins: No, still hidden. Just changing auto doesn't fix dbaron problem. He didn't want size of vw change based on somebody updating [missed]
<dbaron> I think there were actually 2 issues.
<dael> TabAtkins: Change at all is the worry. Main responce is this is no different hen m unit. You change the font and everything below has to change. Only more complicated is that sometimes body can set viewport. So you can effect one element up.
<Rossen> dbaron, can you pls summarize?
<dbaron> One was that dynamic changes to 'overflow' are hard, but that the other is that in Gecko, we need to depend on layout to find out what the scrollbar width is.
<dael> TabAtkins: Aside from that one element jump which is very rare and not important for purpose of tree expence this is identical to setting font size.
<dael> TabAtkins: You dont' need layout this is computed value time
<dael> dbaron: Second thing that made it had is in gecko it's not ready.
<dael> dbaron: [missed]
<dael> dbaron: I'm not even sure it worked rilably. I think it worked most of the time because usually we constructed scrollbars first.
<dael> TabAtkins: Is that b/c scrollbar width is controllable in FF?
<dael> dbaron: It depends on too many OS dependant and that code exists in scrollbar layout.
<dael> TabAtkins: Yeah.
<dael> dbaron: It's possible that the number of things to test is 2 or 3, but that's not the way it was written
<Rossen> wouldn't webkit-scrollbar {width} have the same effect?
<dael> astearns: We're at time. i'm hearing the desire to keep spec behavior as-is, but we'll need other impl to make the changes. WE should continue impl feedback in the issue. We're out of time today, we'll talk next week.
<TabAtkins> s/Yeah./So maybe just moving the code up and piping the data down into layout instead./

[tabatkins]

Summarizing the impl complexity:

1. Adjusting the viewport unit size based on overflow is about as hard as the em unit, which requires some work to make performant.
2. Additionally, you might have to pipe the value up one level, if body is controlling the window scrollbar.
3. In Firefox the size of the scrollbar isn't page-controllable, but it is based on some OS information, which is currently queried only in the scrollbar layout code, which has the practical effect that it depends on layout information. This could be fixed by pulling the OS queries upward and piping the information into both scrollbar layout and viewport unit calculations, but that's new code to be written. (Alternately, just duplicating the queries in the viewport unit calculations.)
4. In WK-based browsers, the scrollbar size is page-controllable, via the ::-webkit-scrollbar-* pseudo-elements. If this is taken into account, the viewport units become inextricably layout-dependent, which defeats the original effort to make them computed-value-time absolute units.

• For 1/2, it shouldn't be quite as expensive as em units, as it's not dynamically changeable per subtree. You check exactly one element's property value, and the whole tree responds accordingly. Still have to pipe the data around and figure out what needs refreshing, of course.
• For 3, this should be a minor impl complexity deal. The information isn't layout-dependent at all, it just happens to only be calculated during layout right now. It can be fixed.
• For 4, I'm happy to have vw only respond to the default width of the scrollbar. If you manually set the scrollbar width on the root element, it actually is quite easy to set up a --var on html equal to the viewport size minus your custom width. This is an intrinsic restriction of the feature, not an incidental one, and it's okay for it to not have 100% fidelity as a result. It's also quite rare.

[dbaron]

I don't think your (1) is quite correct, because testing whether your current calculation is correct is more complex than for em units, and the effect is global rather than local. (The effect with em units can be a wide effect when font-size inherits, but everywhere it happens it's a local effect.)

I also tend to think adding viewport units themselves were a mistake -- something that we thought was simple, but really should have been addressed by layout systems rather than units, and now turn out to be not as simple as we thought.

[tabatkins]

I don't think your (1) is quite correct, because testing whether your current calculation is correct is more complex than for em units,

Only in abstract. In practice, you do the calculations already every layout, to figure out how wide your scrollbar should be. (And if you cache results and only update when necessary, well, that's the exact work you'd need to do for viewport units too.) Once you're already doing the "figure out how wide the scrollbar is" math, checking if you need to update is just a numeric comparison to the current value.

and the effect is global rather than local. (The effect with em units can be a wide effect when font-size inherits, but everywhere it happens it's a local effect.)

font-size almost always inherits; the fact that it's local in application is irrelevant when the entire page gets spammed with "local" updates.

I also tend to think adding viewport units themselves were a mistake -- something that we thought was simple, but really should have been addressed by layout systems rather than units, and now turn out to be not as simple as we thought.

That would have been a huge mistake; one of the big uses of viewport units is piping page-size information into unexpected places, like font-size so your text gets bigger/smaller according to the viewport size. That can't be done with layout systems.

[tabatkins]

That would have been a huge mistake; one of the big uses of viewport units is piping page-size information into unexpected places, like font-size so your text gets bigger/smaller according to the viewport size. That can't be done with layout systems.

(That said, those use-cases don't need precise values; they're not bothered if 100vw isn't precisely the viewport width, they just care that it approximately maps to the viewport width. And the layout use-cases are, generally, better solved by just using Flexbox/Grid. So, uh, it might be possible to convince me that making the viewport units lower-fidelity is acceptable.)

[emilio]

As can be seen in http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=5339, this is now broken since the optimizations in https://bugzilla.mozilla.org/show_bug.cgi?id=1344398 landed, and on the new style system, which decouples styling from layout tree building, it's similarly broken.

Just noticed I meant to point to http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=5340 (Same test case, just adding body:hover { overflow: hidden }, to see the effect). This is broken since Firefox 55.