Bug 264586 – Scroll bar uses dark mode based on overlay scrollbar when not using overlay scrollbar

• Component: Layout and Rendering
• Status: NEW

[Pascal Abresch]

Created attachment 468554 [details]
Patch to check if overlay scrollbars are used

As context, this bug has been discovered in the haikuwebkit port and fixed.

On a page which has a dark background but does not use color-scheme with a value of dark the scrollbar will use the dark color.

This is because webkit checks if the overlayscrollbar style is light, however this check also is done if the port does not use overlay scrollbars.

I've attached the patch to fix this issue, please advice on how I can create a test that checks for the rendering for this issue.

Regards

[Abrar Rahman Protyasha]

Is there some website / page where you came across this bug?

[Adrien Destugues]

Some example websites:

https://pulkomandy.tk - black background for the body element, but the page is otherwise light mode. In Haikuwebkit this results in a dark mode scrollbar

http://www.cantrell.org.uk/david/tech/cpc/cpc-firmware/ - blue background that is classified as "dark", so we get a dark mode scrollbar

I don't know if the render themes for other platforms will take the scrollbar color into account for non-overlay scrollbars, so maybe the issue isn't visible on other platforms?

[Abrar Rahman Protyasha]

Created attachment 468592 [details]
Bug reproduced on shipping Safari 17

Okay yeah, I totally see it on http://www.cantrell.org.uk/david/tech/cpc/cpc-firmware/. Thanks for the link!

[Pascal Abresch]

Is the cpc site the same bug?
On iOS I am getting black overlay scrollbars, which would correspond to the overlayscrollbarstyle dark, which as I understand it is for light mode.

The bug on pulkomamdys site is that it picks light overlay scrollbar style because the background is dark, and thus uses dark mode scrollbars for us. (which are white for overlayscrollbars since they need to contrast the background)

[Radar WebKit Bug Importer]

<rdar://problem/118565009>