Thin scrollbar styling doesn't work on Chrome

[Jake4-CX]

Hello, I've been using your tailwind plugin for my side project, which works great for Firefox, but for some reason when scrollbar-thin is applied, the styled themes are ignored on Chrome.

Chrome version: latest, Windows '117.0.5938.63 (Official Build) (64-bit)'.

DIV Element with classes applied:

<div ref={chatroomScrollRef} className="px-2 items-center justify-center w-full max-h-screen inset-0 relative overflow-x-hidden overflow-y-auto scrollbar-thin scrollbar-thumb-[#6d6f71] scrollbar-track-transparent scrollbar-thumb-rounded-lg">
  <Chatroom chatScrollPaused={chatScrollPaused} />
</div>

The screenshot below shows that the default chrome styling is applied, ignoring the defined styling, whilst being thin. This seems to happen when scrollbar-width is set to thin, and when disabled, it looks fine.

Screenshot of issue:

Thanks,

[adoxography]

Hi there! It's a little odd that scrollbar-width is getting recognized at all in Chrome, which suggests to me that you have #enable-experimental-web-platform-features enabled. (You can check by visiting chrome://flags.) The status quo has been that Firefox recognizes scrollbar-width and scrollbar-color, while the rest of the browsers ignore those properties in favour of pseudoelements. Chrome added experimental support for scrollbar-width in v115, but its experimental support for scrollbar-color won't show up until v118, which hasn't made it to stable yet. (I'm assuming that by "latest" you mean "most recently released stable.")

I can only reproduce this issue (running Chrome 117) when I have #enable-experimental-web-platform-features enabled, so I don't think there's much to be done about it for the time being. Thanks for the heads up, though! :)

[adoxography]

Just an update to this one - with Chrome 118 having landed with support for scrollbar-color, this now works. (I can't say I think it looks very nice, but that's the Chrome team's problem, not mine. :P)