1460109 - [meta] Experimentally implement CSS Scrollbars Module Level 1

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Xidorn Quan [:xidorn] UTC+10]

We want to try pushing for a different way to style scrollbars rather than standardizing the webkit scrollbar pseudo-elements.

There are still unclear bits what is the right thing to do in the spec, so experimental for now.

Comment 1

[Sebastian Zartner [:sebo]]

Xidorn, I guess this should block bug 1323667? Or will there be another meta-bug for the Scrollbars spec. at some point?

Sebastian

Comment 2

[Xidorn Quan [:xidorn] UTC+10]

I guess we can have it block that bug. If we have another meta-bug in the future, we can have the new bug block bug 1323667 as well.

Comment 4

[thedonquixotic]

Dang, I can't believe this still isn't implemented in firefox. Webkit has had this forever.

Comment 5

[Xidorn Quan [:xidorn] UTC+10]

We have implemented scrollbar-color and scrollbar-width in Firefox 64, which is what this bug is about. See refer to the spec[1] and MDN pages[2][3] for more details.

[1] https://drafts.csswg.org/css-scrollbars-1/
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
[3] https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

Comment 6

[Panos Astithas (he/him) [:past] (please ni?)]

Release Note Request (optional, but appreciated)
[Why is this notable]: new CSS feature, product wants to highlight this
[Affects Firefox for Android]: yes
[Suggested wording]: Support for the new CSS scrollbar specification.
[Links (documentation, blog post, etc)]: see comment 5

Comment 7

[stephan.grein]

Hello,

so Firefox 64 contains now scrollbar-color and scrollbar-width from the CSS Scrollbars Module Level 1?
Are there any other keywords I can use?

Best wishes,
SG

Comment 8

[LukaszB]

I'm afraid is a bug with "scrollbar-width: thin;". When overflow is set to "auto" with "scrollbar-width: thin;" and content is generated by js then you can scroll content but no scrollbar is visible.
https://jsfiddle.net/lukaszB123/jk2389z4/13/

Comment 9

[onassar]

I'm noticing a border on the left and right. Is this normal behaviour?
Using FF64
Screenshot: https://i.imgur.com/PIgNmal.png
![](https://i.imgur.com/PIgNmal.png)

Comment 10

[Xidorn Quan [:xidorn] UTC+10]

That is for simulate the native scrollbar appearance, so yes it's expected.

Comment 11

[onassar]

Are there any plans to make this customizable? I really appreciate the work you've done, but have borders appear on the side that can't be styled make them look like artifacts, and make it harder to style visually appealing elements.

Comment 12

[Xidorn Quan [:xidorn] UTC+10]

No. If you want more customizability, you can specify "scrollbar-width: none" to hide the native scrollbar and build it yourself. This property, unlike "overflow: hidden", doesn't affect scrollability, so it should be easier to use for custom scrollbar.

Comment 13

[onassar]

Alright thanks.

Comment 14

[Ryan VanderMeulen [:RyanVM]]

IIUC, this shipped in 64. Is there any reason to keep this bug open?

Comment 15

[onassar]

Where would one submit a bug on the artifacts on the sides of the scrollbars?

Comment 16

[Xidorn Quan [:xidorn] UTC+10]

(In reply to Ryan VanderMeulen [:RyanVM] from comment #14)

IIUC, this shipped in 64. Is there any reason to keep this bug open?

Maybe we can close this. We may still have bugs or the spec may evolve, but I guess if that happens, we can create new meta bug for tracking?

(In reply to onassar from comment #15)

Where would one submit a bug on the artifacts on the sides of the scrollbars?

You can just file new bugs, and probably block this one. Whether it's closed doesn't affect whether you can make other bug block this bug.

Comment 17

[onassar]

Okay great thanks :)

Comment 18

[Tantek Çelik]

Move enhancements to new meta bug for the CR.