Intent to Ship: CSS Scrollbars: scrollbar-color, scrollbar-width

[Luke]

Contact emails

 lukewa...@gmail.com

Explainer

https://github.com/felipeerias/css-scrollbars-explainer

Specification

https://www.w3.org/TR/css-scrollbars-1

Summary

The CSS Scrollbars spec allows authors to style scrollbars by specifying their colors and thickness. This spec adds the following two properties. The scrollbar-color property provides the capability of changing the color scheme of scrollbars so they fit better into the particular style of a web page. The scrollbar-width property allows the use of narrower scrollbars that may be more suitable for some use cases, or even to hide the scrollbars completely without affecting scrollability.

Blink component

Blink>Layout>Scrollbars

Search tags

css, scrollbars, scrollbar-color, scrollbar-width

TAG review

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

TAG review status

Issues addressed

Risks

Interoperability and Compatibility

These are already supported inside of Firefox so shouldn't present much of a risk. It's possible that if Safari doesn't support them this could lead to some level of fragmentation between the legacy pseudo styles and the standard properties.

Gecko: Shipped/Shipping (https://bugzilla.mozilla.org/show_bug.cgi?id=1460109) Firefox fully supports both properties.

WebKit: Positive (https://github.com/WebKit/standards-positions/issues/133) A supportive position has been given for both scrollbar-width and scrollbar-color. See also https://github.com/WebKit/standards-positions/issues/134

Web developers: Positive (https://insights.developer.mozilla.org) "Inability to style browser scrollbars" included in the list of Top Pain Point Categories of the MDN Browser Compatibility Report.

Other signals:

Ergonomics

The value of scrollbar-width influences other properties such as scrollbar-gutter which take the scrollbar's thickness as reference. There might be conflicts between these properties and Chromium's own ::-webkit-scrollbar pseudo-elements that serve a similar purpose. This is partially addressed by these standard properties taking precedence inside of Chromium and WebKit.

Activation

These properties are easy for developers to take advantage of many will already be using them for Firefox support.

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

This should have no impact on WebView applications. It will simply allow customising the colours of scrollbars if they apply the necessary styles.

Debuggability

Both properties will show up in dev tools with auto complete support. Scrollbar color will also have the color swatch show up for both values.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

No

The existing Web Platform Tests are not exhaustive. Internal tests are implemented where necessary. Results: https://wpt.fyi/results/css/css-scrollbars

Flag name on chrome://flags

#enable-experimental-web-platform-features

Finch feature name

ScrollbarColor and ScrollbarWidth

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=891944

Availability expectation

Expect scrollbar-width to be available across all browsers within a year. scrollbar-color requires platform changes for WebKit on Apple platforms so may take longer to be available.

Adoption expectation

I expect these standard properties be the default way developers choose to style both colouring and sizing of scrollbars, replacing the legacy webkit pseudo styles for most developers.

Sample links

https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

Estimated milestones

Shipping on desktop	121
DevTrial on desktop	118

Shipping on Android	121
DevTrial on Android	118

Shipping on WebView

121

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No anticipated spec changes, this is already shipping in Firefox for a long time.

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5665308343795712

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/zwG2m_KG0RY/m/8nEx9wCWAwAJ

This intent message was generated by Chrome Platform Status.

[Luke]

Apologies my email client seems to have messed with the text colour. Lets try that again.

Contact emails lukewa...@gmail.com

Explainerhttps://github.com/felipeerias/css-scrollbars-explainer

Specificationhttps://www.w3.org/TR/css-scrollbars-1

Summary

The CSS Scrollbars spec allows authors to style scrollbars by specifying their colors and thickness. This spec adds the following two properties. The scrollbar-color property provides the capability of changing the color scheme of scrollbars so they fit better into the particular style of a web page. The scrollbar-width property allows the use of narrower scrollbars that may be more suitable for some use cases, or even to hide the scrollbars completely without affecting scrollability.

Blink componentBlink>Layout>Scrollbars

Search tagscss, scrollbars, scrollbar-color, scrollbar-width

TAG reviewhttps://github.com/w3ctag/design-reviews/issues/563

TAG review statusIssues addressed

Risks

Interoperability and Compatibility

These are already supported inside of Firefox so shouldn't present much of a risk. It's possible that if Safari doesn't support them this could lead to some level of fragmentation between the legacy pseudo styles and the standard properties.

Gecko: Shipped/Shipping (https://bugzilla.mozilla.org/show_bug.cgi?id=1460109) Firefox fully supports both properties.

WebKit: Positive (https://github.com/WebKit/standards-positions/issues/133) A supportive position has been given for both scrollbar-width and scrollbar-color. See also https://github.com/WebKit/standards-positions/issues/134

Web developers: Positive (https://insights.developer.mozilla.org) "Inability to style browser scrollbars" included in the list of Top Pain Point Categories of the MDN Browser Compatibility Report.

Other signals:

Ergonomics

The value of scrollbar-width influences other properties such as scrollbar-gutter which take the scrollbar's thickness as reference. There might be conflicts between these properties and Chromium's own ::-webkit-scrollbar pseudo-elements that serve a similar purpose. This is partially addressed by these standard properties taking precedence inside of Chromium and WebKit.

Activation

These properties are easy for developers to take advantage of many will already be using them for Firefox support.

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

This should have no impact on WebView applications. It will simply allow customising the colours of scrollbars if they apply the necessary styles.

Debuggability

Both properties will show up in dev tools with auto complete support. Scrollbar color will also have the color swatch show up for both values.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?Yes

Is this feature fully tested by web-platform-tests?No

The existing Web Platform Tests are not exhaustive. Internal tests are implemented where necessary. Results: https://wpt.fyi/results/css/css-scrollbars

Flag name on chrome://flags#enable-experimental-web-platform-features

Finch feature nameScrollbarColor and ScrollbarWidth

Requires code in //chrome?False

Tracking bughttps://bugs.chromium.org/p/chromium/issues/detail?id=891944

Availability expectationExpect scrollbar-width to be available across all browsers within a year. scrollbar-color requires platform changes for WebKit on Apple platforms so may take longer to be available.

Adoption expectationI expect these standard properties be the default way developers choose to style both colouring and sizing of scrollbars, replacing the legacy webkit pseudo styles for most developers.

Sample links
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

Estimated milestones
Shipping on desktop
121
DevTrial on desktop
118
Shipping on Android
121
DevTrial on Android
118
Shipping on WebView
121

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No anticipated spec changes, this is already shipping in Firefox for a long time.

Link to entry on the Chrome Platform Statushttps://chromestatus.com/feature/5665308343795712

Links to previous Intent discussionsIntent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/zwG2m_KG0RY/m/8nEx9wCWAwAJ

This intent message was generated by Chrome Platform Status.

[Luke]

Yes, it will work on all Scrollbars on all platforms including overlay on macOS. :)

On Sat, 21 Oct 2023, 03:56 Šime Vidas, <sime....@gmail.com> wrote:

Will scrollbar-color work on overlay scrollbars on macOS? It does in Firefox.

[Šime Vidas]

Will scrollbar-color work on overlay scrollbars on macOS? It does in Firefox.

On Friday, October 20, 2023 at 10:46:36 PM UTC+2 Luke wrote:

[Yoav Weiss]

Thanks for working on this!!

I'm guessing we're missing ways to test if the styles were applied. Is that correct?

If so, can you file relevant WPT bugs to make sure we'd be able to expand coverage in the future?

Also, it seems like Safari is passing many of the tests despite not having shipped this. The same is true for stable Chrome. Might be worthwhile to take a look and make sure the tests are actually testing the feature..

--
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/CAE-V8gBRP%2B11PMQSzs%3DLkUJWFnGTXvn5%2B%2Bx%2BWzX82i5sDqSEjw%40mail.gmail.com.

[Luke]

> I'm guessing we're missing ways to test if the styles were applied. Is that correct?

> If so, can you file relevant WPT bugs to make sure we'd be able to expand coverage in the future?

Yeah I'll take a look into filing those bugs, as I understand it there's APIs missing to enable the common scrollbar implementation and you'd then need some form of pixel test or as you say an API to check that the scrollbar has the relevant colours.

> Also, it seems like Safari is passing many of the tests despite not having shipped this. The same is true for stable Chrome. Might be worthwhile to take a look and make sure the tests are actually testing the feature..

Lots of the tests are repaint tests so just make sure that when implemented it handles various cases (lots of them cases that I've come across while implementing). When the properties aren't supported lots of the repaint tests will pass as they rely on the properties in both the actual and expected. I'm not sure on the best way to avoid this?

--

[Yoav Weiss]

LGTM1

On Mon, Oct 23, 2023 at 10:14 AM Luke <lukewa...@gmail.com> wrote:

> I'm guessing we're missing ways to test if the styles were applied. Is that correct?

> If so, can you file relevant WPT bugs to make sure we'd be able to expand coverage in the future?

Yeah I'll take a look into filing those bugs, as I understand it there's APIs missing to enable the common scrollbar implementation and you'd then need some form of pixel test or as you say an API to check that the scrollbar has the relevant colours.

Thanks! 

 

> Also, it seems like Safari is passing many of the tests despite not having shipped this. The same is true for stable Chrome. Might be worthwhile to take a look and make sure the tests are actually testing the feature..

Lots of the tests are repaint tests so just make sure that when implemented it handles various cases (lots of them cases that I've come across while implementing). When the properties aren't supported lots of the repaint tests will pass as they rely on the properties in both the actual and expected. I'm not sure on the best way to avoid this?

Yeah, not sure how that can be resolved without flaky platform-specific screenshots. As such, I don't consider this a blocker.

+Chris Harrelson - Is this an issue y'all ran into in the past?

[Mike Taylor]

LGTM2

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfVj_Rzhx%2BK0yocJDprbjUuuzvdf1khQgk0qZYaYiV4UJg%40mail.gmail.com.

[Torne (Richard Coles)]

Android WebView currently has a hack where we set scrollbars to transparent because WebView shows the normal Android system scrollbar (using the host app's Android theme), to avoid showing two overlapping scrollbars. This currently disables *all* Blink scrollbars, even though the conflict with Android UI is just on the root, which means that there's no scrollbar on nested scrolling elements at all: crbug.com/1327047

Supporting these CSS attributes raises the question of what to do about this. If we apply these attributes normally then they will override WebView's transparent default and we'll potentially end up rendering two overlapping scrollbars. It's unclear whether the legacy webkit pseudo elements actually work at present in WebView or not.

I don't want to block us from shipping this in WebView but we may need to be careful about how we roll it out, and should probably make a decision about crbug.com/1327047 in the process.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/a85b6a9c-cf1e-4ec1-a776-f1455c861822%40chromium.org.

[Luke]

I'm personally okay with holding off shipping this (both scrollbar-width and scrollbar-color) in Android web views initially and then the exact behaviour can be worked out without rushing and without blocking?

[Daniel Bratell]

LGTM3, with or without support in Android WebView depending on what you and Torne decide (good catch by torne). Make sure it's properly set in chromestatus depending on what you choose.

/Daniel

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/3f99b284-7978-49e7-abea-a359a1246f7dn%40chromium.org.

[Torne (Richard Coles)]

We're going to skip Android WebView for now so that this can ship in Chrome without delays, but separately we're going to try updating the WebView behavior here to be less weird, and if that works out without app compat problems we should be able to enable these CSS features in WebView too (just potentially with the caveat that they don't apply to the root scrollbar).

[Luke]

I've updated chromestatus to reflect this aswell.

[soft...@hotmail.com]

Is there any keyword that can be used for the first color to leave it unchanged?

I have an Edge WebView and only want to make the scrollbar transparent (so the Mica material background can be seen through) but without changing the thumb and button colors.

It would be really unforunate having to set explicit colors, because only the OS knows the right ones and they differ between light and dark mode and again for hight-contrast themes.

The -webkit- methods don't help either, because it's an "all-in" method where OS style and colors get lost as well.

Is this a plot hole or is there a way?

Thanks,
sw