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

254 views
Skip to first unread message

Felipe Erias Morandeira

unread,
Oct 16, 2020, 6:11:13 AM10/16/20
to blink-dev
Contact emails
The CSS Scrollbars spec allows authors to style scrollbars by specifying their colors and thickness.
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
There are three main use cases for the CSS Scrollbars spec:

  • Changing the color scheme of scrollbars to fit better into the UI of a web application.
  • Using a thinner scrollbar when the scrolling area is small.
  • Building custom scrollbars without affecting scrollability.
For more detail, see: https://www.w3.org/wiki/Css-scrollbars#Use-cases


Initial public proposal

Search tags
Pending 

Risks
Interoperability and Compatibility
Edge: No signals
Safari: No signals
Web developers: Positive, there is interest in better cross-platform support for styling scrollbars with CSS.

Ergonomics Risks:
The value of scrollbar-width influences other properties such as scrollbar-gutter which take the scrollbar's thickness as reference.
There might be a complex interplay between the current theme and scrollbar-color's light and dark values (Firefox doesn't implement these).
There might be conflicts between these properties and Chromium's own ::-webkit-scrollbar pseudo-elements that serve a similar purpose.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
That's the intention, but there might be platform-specific issues that I am not aware of at this moment.

Is this feature fully tested by web-platform-tests?
The existing tests are not exhaustive and will be improved as part of this work.

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

Link to entry on the Chrome Platform Status

Rick Byers

unread,
Oct 16, 2020, 10:33:24 AM10/16/20
to Felipe Erias Morandeira, blink-dev
Cool, I hadn't realized Firefox had shipped this. I hope it can eventually lead to deprecation of -webkit-scrollbar-* or at least simplification and specification of a subset necessary for web compat in terms of scrollbar-*.

Rick

--
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/796a6b0e-b1c6-406b-a25d-1bfb726941d1n%40chromium.org.

Chris Harrelson

unread,
Oct 16, 2020, 12:46:47 PM10/16/20
to Rick Byers, Felipe Erias Morandeira, blink-dev
On Fri, Oct 16, 2020 at 7:33 AM Rick Byers <rby...@chromium.org> wrote:
Cool, I hadn't realized Firefox had shipped this. I hope it can eventually lead to deprecation of -webkit-scrollbar-* or at least simplification and specification of a subset necessary for web compat in terms of scrollbar-*.

+1 !
 

j.j.

unread,
Oct 18, 2020, 5:36:36 PM10/18/20
to blink-dev
Good news!
What's the case if both, this and ::-webkit-scrollbar-*, is present?

:root { scrollbar-color: gray limegreen }
:root::-webkit-scrollbar { background: red }

I'd probably hope this scrollbar is green.

j.j.

Felipe Erias Morandeira

unread,
Oct 20, 2020, 9:21:26 AM10/20/20
to blink-dev, j.j.
Thank you, that's a good question.

I don't think that we should try to mix the effects of the CSS Scrollbar properties and of -webkit-scrollbar-* on the same element, because there could be unpredictable side effects: for example, the former will not change the type of scrollbars (classic or overlay) from the browser's default, whereas using the latter will force classic scrollbars on the element.

In my opinion, if the standard properties have been set to a value different from the default, they should take precedence over the non-standard pseudoelements.

Does this sound reasonable?

Best,
Felipe

Rick Byers

unread,
Oct 20, 2020, 12:03:05 PM10/20/20
to Felipe Erias Morandeira, blink-dev, j.j.
Sounds reasonable to me, and may help with a deprecation path. We would ideally be careful to measure (UseCounter) the -webkit-scrollbar usage that's actually relevant (not overridden by scrollbar-*) and attempt to drive it down.

Rick

--
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/31364903-05ec-4f37-b21c-3efbbf7924fdn%40chromium.org.

Rick Byers

unread,
Oct 20, 2020, 2:16:44 PM10/20/20
to Mike Taylor, Felipe Erias Morandeira, blink-dev
Awesome, that's super helpful Mike. Given the somewhat optional nature of custom scrollbars, I think this may be an area where (unusually for me) we should perhaps be content with covering 90% of the use cases and then just breaking the non-standard usage. Although we might want to wait for WebKit to have scrollbar-* support too before we do that.

Rick

On Tue, Oct 20, 2020 at 1:51 PM Mike Taylor <mike...@google.com> wrote:
On Fri, Oct 16, 2020 at 9:33 AM Rick Byers <rby...@chromium.org> wrote:
Cool, I hadn't realized Firefox had shipped this. I hope it can eventually lead to deprecation of -webkit-scrollbar-* or at least simplification and specification of a subset necessary for web compat in terms of scrollbar-*.

In a former life, I WONTFIX'd the bug to implement `-webkit-scrollbar` in Gecko for webcompat reasons [1]. Instead, we decided to try a mixture of outreach and shipping CSS interventions using `scrollbar-*` to fix high-impact scrollbar breakage, e.g. [2].


Based on my experience -- there isn't a *ton* of severe breakage due to Firefox not having webkit scrollbar stuff (I do not consider "wrong color" to be severe, others may disagree). (But obviously I don't speak for them anymore.)

Mike Taylor

unread,
Oct 20, 2020, 6:11:21 PM10/20/20
to Rick Byers, Felipe Erias Morandeira, blink-dev
On Fri, Oct 16, 2020 at 9:33 AM Rick Byers <rby...@chromium.org> wrote:
Cool, I hadn't realized Firefox had shipped this. I hope it can eventually lead to deprecation of -webkit-scrollbar-* or at least simplification and specification of a subset necessary for web compat in terms of scrollbar-*.

Ian Kilpatrick

unread,
Oct 21, 2020, 1:17:34 PM10/21/20
to Rick Byers, Mike Taylor, Felipe Erias Morandeira, blink-dev
> Although we might want to wait for WebKit to have scrollbar-* support too before we do that.

This likely isn't as important as the platforms where WebKit is most prevalent typically have overlay scrollbars by default. 

--
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/CAFUtAY8ysJOKUAh0xPgDZB95DrUArGzF1u%2Bm42qD4KCircmudQ%40mail.gmail.com.

Rick Byers

unread,
Oct 21, 2020, 2:36:42 PM10/21/20
to Ian Kilpatrick, Mike Taylor, Felipe Erias Morandeira, blink-dev
On Wed, Oct 21, 2020 at 1:17 PM Ian Kilpatrick <ikilp...@chromium.org> wrote:
> Although we might want to wait for WebKit to have scrollbar-* support too before we do that.

This likely isn't as important as the platforms where WebKit is most prevalent typically have overlay scrollbars by default. 

Oh of course, I forgot that point. Agreed, thanks.

Luke

unread,
May 23, 2023, 6:02:46 PM5/23/23
to blink-dev, rby...@chromium.org, Mike Taylor, felip...@gmail.com, blink-dev, ikilp...@chromium.org
Hey everyone,

Felipe has been unable to finish working on this, so I've recently started working to finish it off.

`scrollbar-width` is now available under the experimental flag inside of Chrome 115. Felipe did 99% of the work on this, I just fixed a textarea bug related to the failing text and moved this under experimental. This should be finished and fully working, and if there are any remaining bugs making it accessible without launch flags should help catch them.

For what it's worth I'm also currently working on adding support for this to property to WebKit, so this will hopefully be available cross browser soon enough.

As for scrollbar-color I'm currently working on parsing support, and intend to then implement the actual rendering support for this. My preliminary investigation of scrollbar rendering on macOS suggests this should be doable without going down the legacy custom scrollbar codepath.
Reply all
Reply to author
Forward
0 new messages