Bug 293548 – REGRESSION(?): :hover and :active states inside &::-webkit-scrollbar-thumb apply to the entire element

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: CSS

This piece of code doesn't work anymore since sometime around Safari 18.4.

.foo {
  &::-webkit-scrollbar-thumb {
    &:hover{
      background: red;
    }
  }
}

Hovering .foo will make the entire background red, instead of only the scrollbar. This used to work.

Creating separate lines, e.g. &::-webkit-scrollbar-thumb:hover { ... } solves it for now.

[Radar WebKit Bug Importer]

<rdar://problem/152126908>

[Ahmad Saleem]

@Emile - by any chance, you have demo or reduction or reproduction of test case, which we can use to reproduce the bug on how you are experiencing on particular website or in your scenario?

Sure! Here's a demo: https://codepen.io/Emile-Nijssen/pen/myJVjad

[Ahmad Saleem]

*** Chrome Canary 139.0.7208.0 (Official Build) canary (arm64) ***
First div container does not show anything on hover.

*** Safari 18.5 ***
First div container show `blue` whole background as blue

*** Firefox Nightly 141 ***
N/A - due to `-webkit-` prefix case.

[Simon Fraser (smfr)]

Issue with nesting and pseudoelements?

[Matthieu Dubet]

*** This bug has been marked as a duplicate of bug 293230 ***