CSS Overflow: scrollbar-gutter

[felipeerias]

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: [css-overflow] overflow: Consider reserving space for scrollbars with some property w3c/csswg-drafts#92 (comment)
  • More detail about the force and always keywords: [css-overflow-4] scrollbar-gutter is too complex w3c/csswg-drafts#4674 (comment)
  • Since this property would make layouts more stable, it also benefits platform developers working on layout tests: Make scrollbars visible on mac screenshots web-platform-tests/wpt#10972 (comment)
• 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

[felipeerias]

Edited: added a link to the explainer.

[atanassov]

The overall explainer looks good. I would encourage you to work with the spec editors and have them adopt your illustrations.

[alice]

It would be nice to see a discussion of why stable can't be made the default value.

Otherwise, this looks good to me, thanks for the explainer!

[atanassov]

Having the ability to request and trigger scrollbar gutter space and/or scrollbars is great and this feature certainly makes it better. What seems obviously missing here is a way for developers to check whether or not a scrollbar is present for any given node in the DOM tree. Also, having events and the ability to attach listeners for such scrollbar events seems like a very useful and often requested feature. Perhaps this could be part of the same spec.

[felipeerias]

Thank you very much for your feedback.

Regarding @alice's question about stable not being the default, my personal assumption is that doing so would break existing layouts so it is safer if scrollbar-gutter is an opt-in property.

As the discussion and implementation get started, a couple issues have come up:

• scrollbar-gutter is an inherited property, which might have unintended consequences for layouts. [css-overflow-4] scrollbar-gutter should not be inherited w3c/csswg-drafts#5231
• some layouts are not possible with the current spec. For example, having headers and dividers that span the whole width of a list. [css-overflow-4] drawing over the space reserved by scrollbar-gutter w3c/csswg-drafts#5232

In that last issue there is a mention about having "an env() way of accessing the computed scrollbar size for solving these cases" which links with @atanassov's mention of getting more information and events about the scrollbar.

I see scrollbar-gutter as a first step for solving the most common use cases, keeping in mind that eventually there might be a need for more elaborated solutions in some scenarios.

[atanassov]

Thank you for the prompt and detail answers @felipeerias. Based on developer demand I would encourage you to continue pursuing exposure of the scrollbar state event.

During our breakout session today we discussed your proposal and are happy to see it continue developing with the csswg. We'll close it during our next plenary meeting.

[felipeerias]

Thank you, @atanassov. I agree that it makes sense to also expose a scrollbar state event.

Last month I finished the parsing of the scrollbar-gutter property in Chromium and I am now working on implementing its behaviour. This feature is still in the "test" state (one step before "experimental") so it will not be ready for prime time just yet, but I am happy to report that things are moving forward.

[atanassov]

@felipeerias Sounds great, good luck.