content
content copied to clipboard
mdn
Add note regarding `::-webkit-scrollbar` and CSS scrollbar property interaction
MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
What specific section or headline is this issue about?
No response
What information was incorrect, unhelpful, or incomplete?
As of Chromium 121 the standard CSS scrollbar properties are supported, and when both these and the ::-webkit-scrollbar properties are both supported the standard properties win. While this is common practice for replacing prefixed CSS with standard it has caught some people by surprise.
Because of this it could be useful to add a note explaining this to the MDN page?
What did you expect to see?
Potentially a small note on the page that explains that when scrollbar-color OR scrollbar-width have a value other than auto, they will override the `::-webkit-scrollbar-*" pseudo styling.
Do you have any supporting links, references, or citations?
I implemented the standard properties within Chromium so I know this interaction is intended behaviour.
Do you have anything more you want to share?
No response
Raised this after hearing a few people on Twitter get surprised by it as well as seeing this issue on the compat-data repo: https://github.com/mdn/browser-compat-data/issues/22195
Hi @lukewarlow - thanks a lot for raising this one.
a small note on the page that explains that when scrollbar-color OR scrollbar-width have a value other than auto, they will override the `::-webkit-scrollbar-*" pseudo styling.
Yes, this is a great idea. Leaving some resources here:
- https://developer.chrome.com/blog/new-in-chrome-121
- https://developer.chrome.com/docs/css-ui/scrollbar-styling (includes example using
@supportsfor fallback) - I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/PkEsMirl2zE
edit: There is already a note since https://github.com/mdn/content/pull/31947 but we could possibly make it more prominent or use the wording you suggested.
Oh that's good it's already there, but yeah I think it's worth making more prominent i read through the page and didn't spot that initially.