Bug 216140 - overflow: scroll on non-body elements ignores CSS/Meta color-scheme causing white scrollbars on light-theme pages when OS is Dark Theme
Summary: overflow: scroll on non-body elements ignores CSS/Meta color-scheme causing w...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 13
Hardware: iPhone / iPad iOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-09-03 13:32 PDT by John Renner
Modified: 2024-03-27 07:35 PDT (History)
7 users (show)

See Also:


Attachments
Screenshots of the issue (2.58 MB, application/zip)
2020-09-03 13:32 PDT, John Renner
no flags Details
Simple test case (35.26 KB, text/html)
2020-09-04 16:30 PDT, John Renner
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description John Renner 2020-09-03 13:32:01 PDT
Created attachment 407908 [details]
Screenshots of the issue

On iOS 13, when the contents of body overflow the viewport, a dark gray scrollbar is presented (when the user begins scrolling) regardless of the system's current color scheme (dark mode or light mode), but scrollbars on elements with the style "overflow: scroll" use scrollbars that match the system color scheme.

When dark mode is enabled, these scrollbars are white and appear invisible on white pages.

In short you get this odd matrix of situations:

Light mode, body overflow: gray scrollbar
Dark mode, body overflow: gray scrollbar
Light mode, div overflow: gray scrollbar
Dark mode, div overflow: white scrollbar

This severely limits accessibility of overflowed elements when the user has selected dark mode on their device.

I've attached a couple screenshots in a zip file to demonstrate the issue.

files
--------
body-scroll-white.jpg: Demonstrates the gray scrollbar on body on a white background even when dark mode is enabled

div-scroll-white.jpg: Demonstrates how you can't see the scrollbar on a div with a white background when dark mode is enabled

div-scroll-gray.jpg: Demonstrates that the white scrollbar is present and visible on a gray-backgrounded div when dark mode is enabled.

Note: This behavior is not present on macOS 10.15.16/Safari 13.1.2
Comment 1 John Renner 2020-09-03 18:56:58 PDT
Looking further into this, the issue appears to be that element-local scrollbars don't honor the css color-scheme property (which seems to default to light), instead honoring the system color scheme above all else.
Comment 2 Radar WebKit Bug Importer 2020-09-04 14:57:15 PDT
<rdar://problem/68367367>
Comment 3 Simon Fraser (smfr) 2020-09-04 15:04:50 PDT
Pretty sure we have a bug on this already (or fixed it).

Can you try Safari Tech Preview?
Comment 4 John Renner 2020-09-04 16:30:48 PDT
Created attachment 408040 [details]
Simple test case

Example HTML file where a div is overflowed. Open on iOS safari with dark mode enabled to see the issue.
Comment 5 John Renner 2020-09-04 16:37:42 PDT
(In reply to Simon Fraser (smfr) from comment #3)
> Pretty sure we have a bug on this already (or fixed it).
> 
> Can you try Safari Tech Preview?

This issue isn't present on macOS Safari (neither stable nor tech preview). It's only on iOS. I've verified it as recently as iPadOS 14 Public Beta (18A5357e). It's also present on stable ios 13
Comment 6 Olivier Tassinari 2024-01-17 16:05:00 PST
The same problem was reported at https://github.com/mui/material-ui/issues/37282 and https://github.com/mui/material-ui/issues/25104.