WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
216140
overflow: scroll on non-body elements ignores CSS/Meta color-scheme causing white scrollbars on light-theme pages when OS is Dark Theme
https://bugs.webkit.org/show_bug.cgi?id=216140
Summary
overflow: scroll on non-body elements ignores CSS/Meta color-scheme causing w...
John Renner
Reported
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
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
View All
Add attachment
proposed patch, testcase, etc.
John Renner
Comment 1
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.
Radar WebKit Bug Importer
Comment 2
2020-09-04 14:57:15 PDT
<
rdar://problem/68367367
>
Simon Fraser (smfr)
Comment 3
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?
John Renner
Comment 4
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.
John Renner
Comment 5
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
Olivier Tassinari
Comment 6
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
.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug