Bug 267575 – Incorrect invalidation of ::-webkit-scrollbar-* on hover

• Status: NEW
• Component: Layout and Rendering

[Bramus]

Created attachment 469411 [details]
Recording

Demo: https://codepen.io/bramus/pen/dyrOGNg/657fde2205298e6c681bbf1ac1c76ab2
Recording: see attachment

Take this CSS, which should change the background color the scrollbars when hovering the scroller:

```css
.scroller::-webkit-scrollbar {
	max-width: 10px;
	max-height: 10px;
}

.scroller::-webkit-scrollbar-thumb {
	background: transparent;
}
.scroller::-webkit-scrollbar-track {
	background: transparent;
}

.scroller:hover::-webkit-scrollbar-thumb {
	background: hotpink;
}
.scroller:hover::-webkit-scrollbar-track {
	background: blue;
}
```

This only happens when actively hovering the scrollbar itself, but not when hovering the scroller itself.

As a workaround, authors now need to force a style invalidation by, for example, means of a Custom Property:

```css
.scroller:hover {
	--safari-fix: ; /* Force a style invalidation on hover */
}
```

[Ahmad Saleem]

Steps to Reproduce (in Safari):

1) Untick 'Fix Safari Style Invalidation Bug'
2) Go to scrollbar area and hover

Expected Result:

Show 'scrollbar' area without doing 'hover'

Actual Result:

Show 'scrollbar' only on hover over scrollbar area and missing 'thumb' as well (pinky)

[Radar WebKit Bug Importer]

<rdar://problem/121426113>