Change colour of scrollbar thumb via CSS in iOS 13

::-webkit-scrollbar-thumb does not work in iOS 13 devices, Need to change thumb colour from black to white for dark background.
Tried below solution but not working.
::-webkit-scrollbar-thumb {
background: white;
}

Any suggestions.
Thanks

Replies

I'm having the same problem in iPadOS 13 and 14. (I tested it in iPadOS 13.5, 13.6, and iPadOS 14 Beta 4.) I can reproduce the exact same problem using the scrollbar examples on the W3Schools.com web site. The scrollbar in these examples doesn't display at all in Safari. It looks like I'm not allowed to put the URL to the examples in this posting, but you can get to them by going to W3Schools.com and then search for "scrollbar". That should get you to the links for "How to create a custom scrollbar".

So far, I haven't figured out a workaround, and I don't know whether it is a bug or was dropped on purpose. If anybody can help explain, please do. Otherwise, I'll update here if I figure something out.

OK, I have more information about my issue of not being able to see the scrollbar at all. It turns out there is a WebKit bug that makes the scrollbar appear invisible when you using the Dark Theme setting. The good news is I changed my iPad to use the Light Theme, and now I can see my scrollbars again. The bad news is the scrollbar isn't picking up any of the -webkit-scrollbar or -webkit-scrollbar-thumb CSS settings, so now I'm in exactly the same spot you are and haven't been able to figure out what CSS we're supposed to use for scrollbars now.

The issue is it looks like the user agent CSS settings are getting picked up instead of our webkit CSS pseudo-elements, and the user agent settings differ based on what theme is selected in iOS/iPadOS. I'd like to be able to see those user agent settings myself, but I don't have a Mac to hook my iPad up to for using the Web Developer tools. I would think we might be able to override the settings if we knew which user agent settings are getting applied to the scrollbar parts.

Here's the title and URL of the webkit bug I mentioned above.

Bug 213394 - When in dark mode, switching to a light theme on the page results in invisible (light) scrollbars
https://bugs.webkit.org/show_bug.cgi?id=213394

I'm having the same problem in iphone IOS 14.

I'm still having the same problem in iphone IOS 15.7.9