A recent Chrome update broke text highlighting on a bunch of sites
Illustration: The Verge
Right now, text highlighting is broken for anyone using recent Chromium-based browsers on some websites. The cause appears to be a change to selection styling that doesn’t play nicely with Tailwind CSS. We’ve noticed it on our site, and so have several people posting about the issue in threads on Github and Chromium.
For affected sites, you may still be able to select, copy, and paste text on websites but there’s no visual indicator that you did so. Or you may not be able to copy and paste text at all or have other unexpected behaviors when you try to select specific text. Tailwind has updated its CSS tools and offered a workaround, but not every site has implemented the fix. That includes The Verge (we’re working on it!), Bloomberg, and some areas on X, like inside the post composer. It’s not clear how widespread the issue is.
This change affects Chrome 131 and other browsers based on recent versions of Chromium (so you won’t see it in Safari, for instance), although some people may have seen it earlier while the change was in testing. Google discusses the selection styling changes causing it in an October developer blog.
What has changed? The inheritance behavior of selection properties has historically been implemented through originating element inheritance, where the selection uses the properties from a ::selection that matches the element being selected. Chrome versions 130 and earlier use this model…
Chrome 131 enables new behavior whereby elements inherit selection behavior from their parent.
Tailwind creator Adam Wathan posted a solution for web developers in this X post, but it could take some time before the fixes are implemented.
Heads up — if all of a sudden your custom text selection colors stopped working in Chrome today (like it did on The Verge and Bloomberg ), enable this feature flag in your `tailwind.config.js` file or update to tailwindcss@3.4.15. pic.twitter.com/uU5paHJS4U— Adam Wathan (@adamwathan) November 14, 2024
Chrome shipped a pretty significant (and generally useful!) change in 131 that unintentionally broke some stuff with CSS variables in `::selection` — more info here:https://t.co/a0qgt48RCj— Adam Wathan (@adamwathan) November 14, 2024
Illustration: The Verge
Right now, text highlighting is broken for anyone using recent Chromium-based browsers on some websites. The cause appears to be a change to selection styling that doesn’t play nicely with Tailwind CSS. We’ve noticed it on our site, and so have several people posting about the issue in threads on Github and Chromium.
For affected sites, you may still be able to select, copy, and paste text on websites but there’s no visual indicator that you did so. Or you may not be able to copy and paste text at all or have other unexpected behaviors when you try to select specific text. Tailwind has updated its CSS tools and offered a workaround, but not every site has implemented the fix. That includes The Verge (we’re working on it!), Bloomberg, and some areas on X, like inside the post composer. It’s not clear how widespread the issue is.
This change affects Chrome 131 and other browsers based on recent versions of Chromium (so you won’t see it in Safari, for instance), although some people may have seen it earlier while the change was in testing. Google discusses the selection styling changes causing it in an October developer blog.
What has changed? The inheritance behavior of selection properties has historically been implemented through originating element inheritance, where the selection uses the properties from a ::selection that matches the element being selected. Chrome versions 130 and earlier use this model…
Chrome 131 enables new behavior whereby elements inherit selection behavior from their parent.
Tailwind creator Adam Wathan posted a solution for web developers in this X post, but it could take some time before the fixes are implemented.
Heads up — if all of a sudden your custom text selection colors stopped working in Chrome today (like it did on The Verge and Bloomberg ), enable this feature flag in your `tailwind.config.js` file or update to tailwindcss@3.4.15. pic.twitter.com/uU5paHJS4U
— Adam Wathan (@adamwathan) November 14, 2024
Chrome shipped a pretty significant (and generally useful!) change in 131 that unintentionally broke some stuff with CSS variables in `::selection` — more info here:https://t.co/a0qgt48RCj
— Adam Wathan (@adamwathan) November 14, 2024