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

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?

The Working Group just discussed Should viewport units still depend on scrollbar width for overflow:scroll?, and agreed to the following resolutions:

RESOLVED: Drop the requirement to subtract scrollbar size from vh/vw units for overflow scroll

The full IRC log of that discussion

<dael> Topic: Should viewport units still depend on scrollbar width for overflow:scroll?
<dael> Github: https://github.com//issues/1766
<dael> Rossen_: Can anyone take this?
<dael> TabAtkins: I'm here.
<dael> TabAtkins: This may not be decided yet. Core of the issue is, vw and vh we spec that if you do overflow scroll on root scroller we take into account size of scrollbar so 100vw fills the visual viewport
<dael> TabAtkins: FF has broken code for this, Servo isn't planning on doing it. We, Chrome, don't do it either. dbaron is asking if we can remove that so vw and vh are based on ignoring scrollbar. My org obj is that distroyed usefulness of these and we decided aut would default to no scrollbar size.
<dael> TabAtkins: After we thought more for layout you don't need...I don't htink many if any vw cases need 100 to be exactly the right size. You can use flexbox or gird for simimlar or better. For otehr things with iewport limits such as scaling fonts, they're fine with a little off
<dael> TabAtkins: I could be convinced that vw are lower fidelity.
<dael> fantasai: I'd ask aorund a bit more. I can imagine wanting something to fill the viewport when you click. Doing layout of sizing of tables if they're too big to wrap them in their own scrollbar. i can see cases.
<dael> TabAtkins: I'd like to see examples that aren't solved in other ways. I should look at the table case again.
<dael> smfr: The author of the webkit blog came asking about this He wanted his viewport to be full bleed and 100 vw was triggering full scrollbars
<dael> smfr: This is only an issue for always on scrollbars.
<Rossen_> position:fixed; left:0; right:0; top0; bottom:0;
<Rossen_> :)
<dael> TabAtkins: I suspect that's why it didn't make it into webkit and then chrome inherited that code.
<dael> TabAtkins: You seem to be arguing we should keep spec as-is so it an respond to scrollbars?
<dael> smfr: Not nec. Independantly we should htink of ways to solve this.
<dael> fantasai: We should solve it with these units. If we don't how do we fix this? Another unit?
<dael> Rossen_: fwiw we don't support in edge or ie either. I'm in support of what TabAtkins said and his rational. At the same time I sympathize with fantasai were if we're going to have units to enable this, this is the unit.
<Florian> Remaining CSS-UI Bugs on mandatory requirements with less than 2 implementations: https://pastebin.com/vu1CCTMv
<dael> Rossen_: Sounds to me like none of the impl have it and the only one with it wants to drop and it's broken. If we allow scrollbar styling that would have more severe effects for how we resolve scrollbar width. What are we doing.
<dael> Rossen_: Options are vw always resolved to full viewport ignoring scrollbars. For most scenarios you know how big the iewport is and if you care about scrollbars you can do calc and subtract.
<dael> myles: You can do better with dino's proposal from the last f2f.
<dael> Rossen_: Even better. Love it. That's a great option once we have it.
<fantasai> s/subtact/subtract some pixels/
<fantasai> s/f2f/f2f. One of those variables can be the scrollbar width/
<dael> Rossen_: Those are the options I see, what do we do?
<dael> myles: Sounds like there's agreement to drop.
<fantasai> :(
<dael> Rossen_: Agreed. Obj?
<fremy> fine with dropping
<dael> RESOLVED: Drop the requirement to subtract scrollbar size from vh/vw units for overflow scroll

style: Remove stale todo about handling scrollbars in viewport units.

Auto merge of #18422 - emilio:stale-todo, r=bholley

servo: Merge #18422 - style: Remove stale todo about handling scrollb…

@dbaron

Edits checked in. c1c2e82 @dbaron, would you mind verifying?

I have a use case for this currently, and it is very frustrating that vw still does not take the scrollbar into account even when setting html { overflow-y: scroll; }

https://codepen.io/coreyworrell/pen/YLrwRX

@coreyworrell

@coreyworrell -> #1958

Hoping scrollbar width/height will solve this issue for us in [css-scrollbars].

Or, if not given the ability to size scrollbars, maybe petition for the ability to access their size with an env() variable??? [css-env-1] list of predefined variables

Then we'll at least be able to derive what would be the scrolling elements "clientWidth" with calc()...

Rossen_: Options are vw always resolved to full viewport ignoring scrollbars. For most scenarios you know how big the iewport is and if you care about scrollbars you can do calc and subtract.

@jonjohnjohnson

@jonjohnjohnson

I don't think being able to set the width of the scrollbar is related to the issue I'm talking about. Unless I'm not understanding what you're saying. You should be able to have a design depend on the available width and have default scrollbars.

The env() variable for scrollbar width would be a suitable fix though, even if very annoying.

I'm just not sure why vw would by default return a value that includes the area taken up by a scrollbar, as web developers avoid causing horizontal scroll at all costs in practice. And if there were a reason to use it, that should be the 'opt-in', not the other way around. But even then, as of now there is no opt-in or opt-out, it just is always included, which is frustrating to say the least.

@coreyworrell

@coreyworrell the discussion above highlights the factors/limitations for the issue and reasoning behind the current decision.

As far as setting a scrollbars width...

:root {
  --valueThatAlsoSetsScrollbarWidth: 20px;
  --vw: calc(100vw - var(--valueThatAlsoSetsScrollbarWidth));
  scrollbar-width: var(--valueThatAlsoSetsScrollbarWidth);
}
.width-100vw {
  width: var(--vw);
}
.width-50vw {
  width: calc(var(--vw) * .5) ;
}

Update In #1958 (comment) it was agreed to have scrollbar-width property not accept lengths, so hopefully we can still get the size the browser uses as an env()? #2630 (comment)

:root {
  --vw-inside-scrollbar: calc(100vw - env(scrollbar-width));
}

It sounds like you're saying that I would need to explicitly set the width of the scrollbars for the site to be able to use vw in a useable way? How would this make sense when operating systems and browsers all have different default scrollbar widths, I would always prefer to let the OS handle that how they see fit rather than force a set width. Let the OS/UI/browser do its thing and just tell me how much space I have for actual layout without causing horizontal scroll.

Oh well though, at this point the benefit of using vw is that it is even supported in IE9, but if there were to be some new method/unit/way of handling this I'm not so sure the older browsers would get those patches, which would require authors to use a different method regardless.

@coreyworrell

@coreyworrell Just trying to offer workarounds for your issue, when the decision that was already made on this topic doesn't give you what you need.

Also, I've resorted to hijacking the rem unit for older browsers creating a "viewport unit" based off clientWidth, which you could also create with a calc() leaving the rem alone for modern browsers. Nevertheless, spec things will always/only impact upcoming versions of browsers. Good luck.

@jonjohnjohnson

@jonjohnjohnson Understood. I appreciate the help and insight. Overall I'm just expressing my frustration with the spec (or the fact the browsers actually haven't stuck to the spec, ie: overflow-y: scroll supposedly disabling this behavior).

@coreyworrell

@coreyworrell In this thread it shows that a decision was made to remove that part of the spec and why.

When the height or width of the initial containing block is changed, they are scaled accordingly. However, any scrollbars are assumed not to exist. c1c2e82

Making it so browser implementations are actually compliant.

@jonjohnjohnson

@jonjohnjohnson Doesn't make it okay or the correct decision that they decided to remove it though.

Why would we need this which can be found viewport-relative-lengths:

However, any scrollbars are assumed not to exist.

This will make 100vw include the width of scrollbar. I think we don't need this.

So,when we set width:100% or width:100vw on html, they both mean that the width of html should be 100% of the width of initial containing block according to the specs. However, width:100vw will get different behavior because of the word above.

If the viewport-relative units are to be defined as independent of whether there are scrollbars, it's much more useful to always subtract a default scrollbar width (or rather even double, accounting for possible scrollbar-gutter). This way there isn't overflow when a single dimension in the layout or a sum thereof reaches 100 of the relevant units. And if there are no scrollbars, some stuff may be smaller, but that's not as big a deal (although authors may want to stretch or repeat backgrounds to cover the extra space).

It makes the most important use case easier when (actually if) the relevant environment variable arrives by not requiring its use along with inelegant calc expressions and possible at all for the near future.

@tabatkins

@tabatkins Not to beat a dead horse, but I do think this is important to get right. I just don't understand why viewport units aren't handled exactly the same as percentage units, as if the element is a direct child of the body for example.

<html style="overflow-y: scroll; /* avoid page shift when scrollbar appears */">
  <body style="margin: 0; padding: 0;">
    <div style="width: 100%;">This is 100% wide, looks good, yay!</div>
    <div style="width: 100vw;">WTF, horizontal scrolling now?</div>
  </body>
</html>

That example alone makes no sense to me. The purpose of viewport units was to be able to reference a percentage of the width of the "initial containing block", instead of only being tied to using a percentage of its parent element.

Why would one want to "draw" an element "under" the scrollbar and force a horizontal scrollbar? If you absolutely needed that for whatever reason, that should be the exception, and handling it would simply involve hiding the overflow however you see fit (overflow-x: hidden or overflow-y-hidden).

I have read through the IRC discussions and do not see any solid reason this was dropped.

If viewport units act like %s, then they change from being "resolveable at computed-value time" to "resolveable at used-value time". This is a huge change! It means that a lot of uses you might want simply don't work; any place that currently has "% acts like auto" behavior would give viewport units the same behavior.

We thought it was more useful to have viewport units always be usable.

@tabatkins

@tabatkins Sorry, I don't think I follow. Maybe my use of exactly was too broad. I just meant in the aspect of the size that the unit represents.

A viewport unit should always be usable like you said, of course. The definition of "viewport" is the issue though. To website developers, it should mean 1% of the available space I'm given. If a browser draws a scrollbar in that space, it is no longer available, thus the value of 1vw should adjust accordingly.

servo: Merge #18422 - style: Remove stale todo about handling scrollb…

Could we reopen this issue? The current viewport units are obviously useless as #1766 (comment) and the number of developers complaining show.

The previous resolution in this issue has been reversed in #6026. overflow: scroll on the root element (or similar things, such as scrollbar-gutter: always) will now reduce the size of the viewport units.

There's a few wrinkles - setting overflow:scroll on the body element will also trigger root scrollbars, but won't change viewport units, because of cyclic issues. And if you manually adjust the size of scrollbars with the WebKit/Blink scrollbar pseudo-elements, that won't be taken into account, again for cyclic reasons. But scrollbar-width on the root element will be taken into account, so thin scrollbars will work correctly.

servo: Merge #18422 - style: Remove stale todo about handling scrollb…

[viewport units] Enable SmallerViewportUnits by default

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

css-meeting-bot commented on Sep 6, 2017

fantasai commented on Sep 19, 2017

coreyworrell commented on May 7, 2018

jonjohnjohnson commented on May 7, 2018

coreyworrell commented on May 7, 2018

jonjohnjohnson commented on May 7, 2018

coreyworrell commented on May 7, 2018

jonjohnjohnson commented on May 8, 2018

coreyworrell commented on May 8, 2018

jonjohnjohnson commented on May 8, 2018

coreyworrell commented on May 8, 2018

xianshenglu commented on Jun 5, 2018

ByteEater-pl commented on Feb 4, 2019

coreyworrell commented on Feb 5, 2019

tabatkins commented on Feb 6, 2019

coreyworrell commented on Feb 6, 2019

geryogam commented on Nov 12, 2023

tabatkins commented on Nov 29, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions