| Summary: | overflow: scroll on non-body elements ignores CSS/Meta color-scheme causing white scrollbars on light-theme pages when OS is Dark Theme | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | John Renner <john> | ||||||
| Component: | Scrolling | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | NEW --- | ||||||||
| Severity: | Normal | CC: | dino, jeripeier, pxlcoder, simon.fraser, timothy, webkit-bug-importer, zalan | ||||||
| Priority: | P2 | Keywords: | InRadar | ||||||
| Version: | Safari 13 | ||||||||
| Hardware: | iPhone / iPad | ||||||||
| OS: | iOS 13 | ||||||||
| Attachments: |
|
||||||||
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. Pretty sure we have a bug on this already (or fixed it). Can you try Safari Tech Preview? 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.
(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 The same problem was reported at https://github.com/mui/material-ui/issues/37282 and https://github.com/mui/material-ui/issues/25104. |
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