Design Review #520

#520: CSS Overflow: scrollbar-gutter

Opened Jun 2, 2020

Hola TAG!

I'd like to request a TAG review of scrollbar-gutter.

The scrollbar-gutter property gives control to Web authors over the presence of scrollbar gutters separately from the ability to control the presence of scrollbars provided by the overflow property. This allows authors to avoid layout changes when the content size changes, while also avoiding ugly visuals when scrolling isn't needed.

Explainer: https://github.com/felipeerias/scrollbar-gutter-explainer
Specification URL: https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property
Tests: no WPT tests yet (working on them!)
Primary contacts (and their relationship to the specification):
- CSSWG for the spec (editors: @dbaron @frivoal)
- Felipe Erias (Blink/Chromium implementation)
Organization(s)/project(s) driving the specification: CSSWG
Key pieces of existing multi-stakeholder review or discussion of this specification:
- Spec discussion at the CSSWG: https://github.com/w3c/csswg-drafts/issues/92#issuecomment-272567887
- More detail about the force and always keywords: https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-575027040
- Since this property would make layouts more stable, it also benefits platform developers working on layout tests: https://github.com/web-platform-tests/wpt/issues/10972#issuecomment-395262455
External issue trackers:
- Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=710214
- WebKit: https://bugs.webkit.org/show_bug.cgi?id=167335

Further details:

I have reviewed the TAG's API Design Principles
Relevant time constraints or deadlines: ideally by July 2020
The group where the work on this specification is currently being done: CSSWG

We'd prefer the TAG provide feedback as

💬 leave review feedback as a comment in this issue and @-notify @felipeerias

Discussions

2020-06-15

Minutes

Rossen: A rehash of topic discussed in CSSWG for quite some time. Issue linked (4674) discussed at length, agreed on general shape of the API, and agreed to move on and start specifying it in css-overflow spec. So in terms of venue and having folks engaged I think we're there. Question is does this property and behavior overall make sense from the TAG's PoV.

Discussion of && in CSS syntax.

Rossen: General idea is to make layouts more stable for scrollbars or other UI types for scrolling, custom scrollbars, etc.

Peter: Always weird that change to layout in one dimension can cause scrollbar in the other dimension

Rossen: It's become sort of natural to me :-)

Alice: Looks pretty good, the illustrations help. Would be nice to see each value compared between classic and overlay instead of this big thing. Only question would be why is the current bad behavior the default?

Rossen/Peter: history.

Alice: Looks good to me, but makes me sad we can't fix the default. Maybe explainer should say? Maybe I'll ask in the issue even though I have know the answer. Would be nice to know what would break?

Peter: Some OSes almost always do overlay scrollbars and sidestep the issue.

Rossen: I'm adding comment now to encourage authors to transfer the examples over to the spec since the spec doesn't have any. Would be great to have them in the spec.

Alice: In the context of the spec they'd have no choice to show the classic and overlay examples per-value. It's really only stable that behaves differently between classic and overlay scrollbars. Seems like stable would be a good default, but it's not.

David: probably pages that know there are never scrollbars, would break.

Rossen: Aside, why not an event to say whether there's a scrollbar?

David: Though there was an overflow event... oh, it's Gecko-specific.

Rossen: Back to scrollbar-gutter, seems overall ok... does the TAG need to do more?

Peter: Don't see anything architectural. Though question of where this fits into things like APIs and events that we're missing, I think that's valid feedback

2020-07-20

Minutes

Rossen: Propose closing?

Alice: Sounds good.

Rossen: I'll comment and update the label