Scrollbar doesn't update on CSS color-scheme change

• Component: CSS
• Status: RESOLVED FIXED

[Maros]

Created attachment 461974 [details]
Bug example

When "color-scheme" change from "light" to "dark" and vice versa colors of scrollbar aren't updated. It seems like element reflow/repaint is missing. I created jsfiddle which displays this issue. Colors are updated only after hover over scrollbar or in case scrollbar is rendered due "overflow:auto" force-reflow hack fix it too but it didn't work if scrollbar came from "overflow:scroll".

Steps to reproduce in example
1. Open in Safari
2. Click "Toggle theme - dark" button
  - page should change background color to blue but scrollbars should stay same as on yellow (white bg with grey slider)
3. Click "Force reflow"
  - top block with Lorem ipsum should change scrollbar colour to be semi-transparent (low opacity dark bg and grey slider), but lower block with horizontal & vertical scrollbar should stay same
4. Hover over scrollbars of bottom Lorem ipsum
  - scrollbars should turn to semi-transparend but bottom right edge should stay white


Example in attachement & in JSFiddle https://jsfiddle.net/marospistej/vj9tf2on/41/

Issue is only present on Safari, all Chrome, FF change scrollbar color as expected even without reflow

Expected behaviour:
When "color-scheme" change scrollbars should update

[Maros]

It's also necessary to set "Show scroll bars" to "Always" in Settings > General

[Peter]

Happens on macOS Ventura as well.

[Radar WebKit Bug Importer]

<rdar://problem/99567600>

[Luke Warlow]

Pull request: https://github.com/WebKit/WebKit/pull/15264

[Luke Warlow]

See also URL: https://github.com/web-platform-tests/wpt/pull/40737

(I don't have permission to edit the bug)

[EWS]

Committed 266176@main (044d44c8940b): <https://commits.webkit.org/266176@main>

Reviewed commits have been landed. Closing PR #15264 and removing active labels.