| Summary: | Can't override ::-webkit-scrollbar display: none | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Jeff Johnson <opendarwin> | ||||||||
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||||||
| Status: | NEW --- | ||||||||||
| Severity: | Normal | CC: | ahmad.saleem792, lwarlow, nmouchtaris, simon.fraser, webkit-bug-importer, zalan | ||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||
| Version: | Safari 16 | ||||||||||
| Hardware: | Mac (Apple Silicon) | ||||||||||
| OS: | macOS 12 | ||||||||||
| Attachments: |
|
||||||||||
I am not able to reproduce this in Safari 16.5.1 and it does not show 'scrollbar' for ::-webkit-scrollbar { display: none; } and it matches Chrome Canary 117 as well.
NOTE - for some reason, I am not able to scroll '::-webkit-scrollbar { display: none; }' case in WebKit ToT while can do in STP174 and Safari 16.5.1.
New bug altogether?
Created attachment 467092 [details]
New sample html
Created attachment 467093 [details]
Screenshot of new sample html
Here's a screenshot to illustrate the issue. I'm using Safari 16.5.2 (18615.2.9.11.10). Notice that in the bottom div, the scroller is partially drawn but not fully drawn.
(In reply to Jeff Johnson from comment #5) > Created attachment 467093 [details] > Screenshot of new sample html > > Here's a screenshot to illustrate the issue. I'm using Safari 16.5.2 > (18615.2.9.11.10). Notice that in the bottom div, the scroller is partially > drawn but not fully drawn. Oh! I am able to reproduce this on WebKit ToT as well. Thanks for reference screenshot. ooh that's an interesting bug. Can reproduce in Chrome as well. Only difference in Safari is that Safari renders an odd scroll corner. Fwiw in future hopefully you'll be able to just use scrollbar-width which behaves much butter. (See https://bugs.webkit.org/show_bug.cgi?id=231588) I believe the cause of this is WebKit (and Chrome) look for the existence of the pseudo element styles to decide whether to go down the custom scrollbar path. But doesn't account for the "revert" case. The long and short of it is currently you're correct there is no way to override it. Because it's in both WebKit and Chromium it seems it's just how it's always worked. I'm hesitant to try and make any changes to how the pseudo itself works at this point because it might not be web compatible. Having said that, it would be nice to have a way to override it and reset it back to standard and the new standard properties seem like an ideal mechanism. Unfortunately, scrollbar-width and scrollbar-color auto will result in the WebKit styles being used. In both Chromium and WebKits implementations. I've raised a spec issue surrounding this. https://github.com/w3c/csswg-drafts/issues/9169 Potentially a new value for these properties such as "normal" can be used to completely disable the custom styles. The alternative might be once the standard properties are in all three browser engines (I'm trying my best to get there) that the webkit ones can be disabled. But I think the more likely end result will be that display: none still works and as such this issue will still exist. |
Created attachment 466248 [details] Sample html demonstrating the bug When ::-webkit-scrollbar { display: none; } is used, there's no way to override it and display the scrollbar. No other display value works, e.g., unset. See attached sample html.