adoxography/tailwind-scrollbar

Not working on Chrome 121

Closed this issue · 12 comments

devsquad-victor-lima commented

Hello guys! Today my browser just got auto updated and I noticed that the scrollbar customization is no longer working.

I have Chromium 120 installed and it works like a charm, but in Chrome 121 it doesn't.

Does anyone know a workaround or if the package is going to be updated?

Example:
<body class="font-sans antialiased h-full scrollbar-thin scrollbar-thumb-primary scrollbar-track-white">

Version 120.0.6050.0 (Developer Build) (arm64)
image

Version 121.0.6167.85 (Official Build) (arm64)
image

adoxography commented

As of v121, Chrome conforms to CSS Scrollbars Styling Module Level 1 (like Firefox does), meaning that it recognizes the scrollbar-width and scrollbar-color properties. These properties override the ::-webkit-scrollbar family of pseudoelements when present (since they're not on the standards track). What I suspect is happening here is similar to known interactions between (e.g.) Firefox and MacOS, where Firefox defers to the OS to render scrollbar colours. For me, running Chrome 121 on Windows, I get Firefox-like scrollbars with correct sizing and colour.

textoo commented

Got the same problem on Linux Mint 20.3 Cinnamon with latest Chrome 21.0.6167.85 (Official Build) (arm64)

find out that disabling this in inspector , brings back the scrollbar styling :

@media (min-width: 640px){
.sm\:scrollbar-thin {
    scrollbar-width: thin;
}}

(yes i only apply thin on sm breakpoint)

but if i remove sm:scrollbar-thin from my element classes other scrollbar stylings are not working

adoxography commented

Yes, as I said, the standards-track properties (scrollbar-size, scrollbar-color) override the non-standard ::-webkit-scrollbar pseudoelements. Removing them will make the pseudoelements show up again, but you can't pick and choose here; doing this on a CSS level will break Firefox because it has never supported the pseudoelement approach.

As far as I'm aware, this is now a Chrome quirk - whether it's intentional or buggy, I don't know.

  • 👍3
devsquad-victor-lima commented

Yeah I forgot to mention that I'm running Chrome on MacOS.
I'm going to try and find a solution considering your answers and I'll let you know if I succeed.

thx guys! :)

  • 👍1
textoo commented

hello, i've made more tests on Chrome, Firefox and Opera all on Linux Mint.

i found that only scrollbar-width: thin on Chrome override the webkit pseudo element, other properties and values for this property are ok.

on Firefox scrollbar-width is the only property that makes changes on scrollbar appearance, but scrollbars in Firefox are working like scrollbars in mobile devices, so i guess we can skip concern for Firefox (at least on Linux Mint)

on Opera everything works.

can't test on Macos and Windows browsers

adoxography commented

I've published a potential fix for this to NPM. I don't love it because it involves CSS-only browser detection (which is janky at best), but it'll let you limit the scope of those scrollbar-width and scrollbar-color properties to just Firefox. I want to leave the standards-track method as the default (even if there still appear to be some kinks for vendors to work out), so this is an opt-in feature.

Feel free to give it a spin:

  1. Update to the prerelease version
npm install tailwind-scrollbar@3.1.0-rc.0  # or the equivalent for whichever package manager you're using
  1. Update your tailwind.config.js to specify the preferred scrollbar strategy as "pseudoelements."
module.exports = {
    // ...
    plugins: [
        // ...
        require('tailwind-scrollbar')({
            // ...
            preferredStrategy: 'pseudoelements',  // <- Prefer pseudoelement scrollbars where possible
        }),
    ],
};
  • 👍10
textoo commented

works as expected here on Chrome, Opera and Firefox on Linux Mint. thanks :)

eoinlarkin commented

Encountered similar issue on Fedora 39, the updated package and config resolved the issue. Thanks

droplab commented

Thanks for the fix!

Erij-Maherzia-BEN-BRAHIM commented

@adoxography thanks for this, but it doesn't include fixing the rounded bars

adoxography commented

@adoxography thanks for this, but it doesn't include fixing the rounded bars

It does, insofar as it's able to restore them to what they did before. Rounded utilities are locked behind the nocompatible flag for this reason: they only have an effect on pseudoelement scrollbars. That's why they've never had any effect on Firefox and why they (by default) won't have any effect on Chromium-based browsers any longer. This fix tricks Chromium back to the way it was.

devsquad-victor-lima commented

Thanks for the fix, it now works as expected! :D