Intent to Ship: CSS Overflow scrollbar-gutter

[Felipe Erias]

Contact emails

felip...@igalia.com, felip...@gmail.com

Explainer

https://github.com/felipeerias/scrollbar-gutter-explainer

Specification

https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property

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

css, layout, overflow, scrollbar, gutter, scrollbar-gutter

TAG review

https://github.com/w3ctag/design-reviews/issues/520

TAG review status

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

Intent to prototype: https://groups.google.com/a/chromium.org/d/msg/blink-dev/GErJ9WbxJrU/F8N2xl1kBgAJ

[Mike West]

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

Intent to prototype: https://groups.google.com/a/chromium.org/d/msg/blink-dev/GErJ9WbxJrU/F8N2xl1kBgAJ

--
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]

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]

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]

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:

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

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

>> *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]

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]

LGTM1

/Daniel

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/06ba017c-6ba4-4a98-aadb-1c99850c2dfdn%40chromium.org.

[Mike West]

LGTM2, thanks for responding above!

-mike

[Alex Russell]

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.