Bug 48905 – ::-webkit-scrollbar* drawing errors

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Samo Korosec]

Created attachment 72808 [details]
example with custom scrollbars and identical css styles used on DIVs

I'm trying to implement custom scrollbars with CSS only and have stumbled upon what I think is are wrong rendering behaviours;

1) I assumed that the -webkit-scrollbar-thumb is an element within -webkit-scrollbar-track, meaning that -webkit-scrollbar-thumb's box-shadows would be cut off within (masked by) the -webkit-scrollbar-track element. I also assumed it's possible to change the opacity/style of the -webkit-scrollbar-thumb for the case when the user hovers inside its -webkit-scrollbar-track parent. 

The current behaviour allows the -webkit-scrollbar-track style to change on hover, but leaves the child -webkit-scrollbar-thumb in its inactive (in my case semi-transparent state) until the user also hovers over -webkit-scrollbar-thumb. 

The box-shadow behaviour is fine initially, yet as soon as the -webkit-scrollbar-thumb is dragged, its box-shadow gets rendered outsite of the -webkit-scrollbar-track's boundaries.

2) It appears that -webkit-scrollbar width/height properties affect -webkit-scrollbar-track and -webkit-scrollbar-thumb, making it impossible to, for example, work with a padding within -webkit-scrollbar-track or with a custom width for the -webkit-scrollbar-thumb. This is probably again dependant on the assumption that the -webkit-scrollbar-thumb element is a child of -webkit-scrollbar-track—something you guys likely know better.



To see what kind of rendering behaviour I expected, look at the div-based scrollbar elements outside the two text-containing divs. 

Thanks for doing such a great job with WebKit, it's a real pleasure to work with :) 
 
Samo

[Brent Fulgham]

As far as I can tell, Chrome and Safari render this example identically. Firefox seems to just use system scrollbars.

Please REOPEN if you believe there is an ongoing issue in WebKit.