Intent to Ship: CSS Overflow scrollbar-gutter

407 views
Skip to first unread message

Felipe Erias

unread,
Jul 14, 2021, 10:29:27 AMJul 14
to blink-dev
Contact emails

API spec
Yes

Summary
The "scrollbar-gutter" property provides control over the presence of scrollbar gutters (the space which may be reserved to display a scrollbar).

This allows authors to prevent layout changes as content expands or contracts (triggering the appearance/disappearance of a scrollbar) while avoiding unwanted visuals when scrolling isn't needed.

Note that the presence of the scrollbars themselves is determined by the "overflow" property and that the decision of whether to use classical or overlay scrollbars is up to the user agent.

Blink component
Blink>CSS

Search tags
Issues addressed

Risks

Interoperability and Compatibility

Gecko: Positive (https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-857952397)

WebKit: Positive (https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-857841639)

Web developers: Positive (https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-857841639) Long discussion of scrollbar-gutter at the CSS WG, citing developer need for an easier way to reason about layout when content grows or shrinks.

Note: the initial version of this spec raised concerns among WebKit and Gecko, mainly regarding its interaction with overlay scrollbars. These issues were solved in a CSS WG meeting where it was agreed to reduce the scope of this property for the time being to the subset of functionality that gathered unanimous support among the browser representatives.

Is this feature fully tested by web-platform-tests?
Yes, as much as possible. Chromium has additional unit tests and Blink-specific layout tests.

Flag name


Requires code in //chrome?
False

Tracking bug
https://crbug.com/710214

Link to entry on the Chrome Platform Status https://chromestatus.com/feature/5746559209701376

Links to previous Intent discussions

Mike West

unread,
Jul 15, 2021, 4:51:49 AMJul 15
to Felipe Erias, blink-dev
This looks pretty reasonable to me. I have two questions below:

I agree that the web developer feedback seems reasonably represented, but I'd appreciate you asking for official signals from Gecko and WebKit in the way they've asked us to do so, as per https://bit.ly/blink-signals.

Note: the initial version of this spec raised concerns among WebKit and Gecko, mainly regarding its interaction with overlay scrollbars. These issues were solved in a CSS WG meeting where it was agreed to reduce the scope of this property for the time being to the subset of functionality that gathered unanimous support among the browser representatives.

"For the time being" worries me a bit. What's the forward-compatibility story for the time in the future when we want to tackle the things that didn't get unanimous support?

Is this feature fully tested by web-platform-tests?
Yes, as much as possible. Chromium has additional unit tests and Blink-specific layout tests.

Flag name


Requires code in //chrome?
False

Tracking bug
https://crbug.com/710214

Link to entry on the Chrome Platform Status https://chromestatus.com/feature/5746559209701376

Links to previous Intent discussions

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/8bcc3d70-7123-4789-b9b0-c03d1b76e76fn%40chromium.org.

Manuel Rego Casasnovas

unread,
Jul 15, 2021, 8:06:19 AMJul 15
to Felipe Erias, blink-dev


On 14/07/2021 10:10, Felipe Erias wrote:
> *Interoperability and Compatibility*
>
> Gecko: Positive
> (https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-857952397
> <https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-857952397>)
>
> WebKit: Positive
> (https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-857841639
> <https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-857841639>)

These are not official signals, you should fill them following
https://bit.ly/blink-signals.

> Web developers: Positive
> (https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-857841639
> <https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-857841639>) Long
> discussion of scrollbar-gutter at the CSS WG, citing developer need for
> an easier way to reason about layout when content grows or shrinks.

The bug has 18 stars and the reactions on twitter after this intent mail
seems that is something people are very interested on:
https://twitter.com/intenttoship/status/1415328343583494148/retweets/with_comments

> *Is this feature fully tested by web-platform-tests
> <https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md>?*
> Yes, as much as possible. Chromium has additional unit tests and
> Blink-specific layout tests.

Ok, I guess the limitation is due to overlay scrollbars on Mac:
https://github.com/web-platform-tests/wpt/issues/10972

If there are other WPT limitations please report the corresponding issue
on GitHub.

Cheers,
Rego

Felipe Erias

unread,
Jul 15, 2021, 11:18:03 AMJul 15
to blink-dev, mk...@chromium.org, blink-dev, Felipe Erias
Thank you so much for your feedback.

Yes, you are right. I have already requested an updated position via the official channels:

- WebKit https://lists.webkit.org/pipermail/webkit-dev/2021-July/031923.html

- Gecko https://github.com/mozilla/standards-positions/issues/488#issuecomment-880439110

As for your second question, perhaps "for the time being" was not the right way to put it, sorry :) What I meant was just that the standard spec for this property may grow in the future.

There are more use cases that we would like to cover, particularly on the interaction between overlay scrollbars and content layout. For example, being able to move some interactive content outside of the area affected by overlay scrollbars.

There is consensus that these are interesting use cases to solve, but we and others at the CSS WG haven't found the right way to do it yet. It might be that the solution to those use cases can be achieved by extending scrollbar-gutter (and the spec already includes an appendix with possible extensions for scrollbar-gutter) or it might be that the solution is something else (and there are also some ideas about that).

In any case, our intention is to continue working with a standard-based approach.

Best,
Felipe

Felipe Erias

unread,
Jul 15, 2021, 11:18:25 AMJul 15
to Manuel Rego Casasnovas, blink-dev
On 15/07/2021 13:57, Manuel Rego Casasnovas wrote:
>
>
> On 14/07/2021 10:10, Felipe Erias wrote:
>> *Interoperability and Compatibility*
>>
>> Gecko: Positive
>> (https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-857952397
>> <https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-857952397>)
>>
>> WebKit: Positive
>> (https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-857841639
>> <https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-857841639>)
>
> These are not official signals, you should fill them following
> https://bit.ly/blink-signals.


Thank you, you are right. Even though there were browser representatives
at the CSS WG meetings, I should have requested an updated position via
the official channels.

I have just done so:
>> *Is this feature fully tested by web-platform-tests
>> <https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md>?*
>> Yes, as much as possible. Chromium has additional unit tests and
>> Blink-specific layout tests.
>
> Ok, I guess the limitation is due to overlay scrollbars on Mac:
> https://github.com/web-platform-tests/wpt/issues/10972
>
> If there are other WPT limitations please report the corresponding issue
> on GitHub.


Yes, overlay scrollbars are one limitation.

The other one is not really WPT's fault: scrollbars have different
thickness on each platform, so it is not easy to write layout tests that
check for exact sizes and positions.

I hope that in the future we can provide Web authors with a standard way
to get more information about the type and dimensions of scrollbars.


Thank you very much for your feedback.

Best,
Felipe

Ben Mathwig

unread,
Jul 15, 2021, 11:47:25 AMJul 15
to blink-dev, felip...@igalia.com, Manuel Rego
Thanks for working on this Felipe! It's great to finally see this property make it into an implementation!

Just to chime in here from the Microsoft Edge perspective. Edge is planning on bringing back Overlay Scrollbars in Chromium on Windows to align with new Windows 11 UI enhancements that have been announced. While I share the concern for the forward-compatibility issues that were mentioned, I'm confident that the CSS WG will work out a solution that works for classical and overlay scrollbars going forward.

--Ben 

Daniel Bratell

unread,
Jul 22, 2021, 2:39:09 PMJul 22
to Felipe Erias, blink-dev, mk...@chromium.org

Mike West

unread,
Jul 22, 2021, 3:30:05 PMJul 22
to Daniel Bratell, Felipe Erias, blink-dev
LGTM2, thanks for responding above!

-mike

Alex Russell

unread,
Jul 22, 2021, 3:31:29 PMJul 22
to blink-dev, Mike West, felip...@igalia.com, blink-dev, Daniel Bratell
LGTM3; excited to see this moving forward, it's gonna remove a lot of expensive JS hacks.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
Reply all
Reply to author
Forward
0 new messages