A recent Chrome update broke text highlighting on a bunch of sites

By The Verge | Created at 2024-11-19 16:09:15 | Updated at 2024-11-26 14:26:53 6 days ago
Truth

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.

Read Entire Article