Bug 206771
| Summary: | [iOS] Nested container scrollbars always follow dark theme preference | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Sepand Parhami <sparhami> |
| Component: | Scrolling | Assignee: | Nobody <webkit-unassigned> |
| Status: | REOPENED | ||
| Severity: | Trivial | CC: | aestes, ldebeasi, simon.fraser, thorton, timothy, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 13 | ||
| Hardware: | iPhone / iPad | ||
| OS: | iOS 13 | ||
Sepand Parhami
On iOS (13.3), when the user has set an OS level preference for dark theme all scrollbars for nested containers (i.e. not the document itself) follow the OS preference, regardless of the page's effective background color, and render with a light color. In contrast, the document's scrollbar is based on the `<html>` or `<body>` element's background. This results in scrollbars for any nested containers being effectively invisible against a white background (i.e. the page doesn't support `prefers-color-scheme` and always renders in a light theme).
On Mac (Safari 13.0.4 (15608.4.9.1.3)), both scrollbars will be dark with a dark theme OS preference. When changing the body's background color to black, the document scrollbar will be light, and the nested scrollbar will be dark. When setting `color-scheme: light dark;` on the document root, both the document and nested scrollbar will be light, regardless of the page's background color (so if I change the page background to be explicitly `background-color: white`, the scrollbar will be effectively invisible).
It would be nice to have something like what desktop does, which is always render nested scrollbars with a dark color (for historical web compat) and render them with a light color if `color-scheme` explicitly includes `dark`. I'm not sure if the page background should be ignored like for the document scrollbar like desktop, but it does not seem like a big issue.
Example reproduction page: https://output.jsbin.com/womilor
On iOS, when dark theme is set:
- The top scrolling container will have a light scrollbar.
- The body itself will have a dark scrollbar.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/58946793>
Liam DeBeasi
I am also running into this issue on macOS Safari. Non-body scrollable containers do not update the scrollbar styling for dark mode. The current behavior is that the scrollbars always appear with a light theme.
Steps to Reproduce:
1. Open this CodePen in macOS Safari: https://codepen.io/liamdebeasi/pen/poJYygy
2. Open System Preferences and go to "General".
3. Set "Appearance" to "Light".
4. Set "Show scroll bars" to "Always". A light-themed scrollbar should now be visible on the scrollable div in the CodePen.
5. Set "Appearance" to "Dark" in System Preferences.
6. You should notice that the scrollbar remains light-themed.
In this case, I would expect that the scrollbar's styling would become dark themed.
Tested on Safari 13.1 on macOS 10.15.4
Sepand Parhami
(In reply to Liam DeBeasi from comment #2)
> I am also running into this issue on macOS Safari. Non-body scrollable
> containers do not update the scrollbar styling for dark mode. The current
> behavior is that the scrollbars always appear with a light theme.
>
> Steps to Reproduce:
>
> 1. Open this CodePen in macOS Safari:
> https://codepen.io/liamdebeasi/pen/poJYygy
> 2. Open System Preferences and go to "General".
> 3. Set "Appearance" to "Light".
> 4. Set "Show scroll bars" to "Always". A light-themed scrollbar should now
> be visible on the scrollable div in the CodePen.
> 5. Set "Appearance" to "Dark" in System Preferences.
> 6. You should notice that the scrollbar remains light-themed.
>
> In this case, I would expect that the scrollbar's styling would become dark
> themed.
>
> Tested on Safari 13.1 on macOS 10.15.4
You will want to indicate that you support the dark color scheme:
```
body {
color-scheme: light dark;
}
```
Liam DeBeasi
Thanks! I updated the CodePen. It looks like everything is working properly now. Maybe `color-scheme` is required for this to work properly?
Liam DeBeasi
Answered my own question: https://webkit.org/blog/8840/dark-mode-support-in-webkit/. Thanks for the help!
Timothy Hatcher
Is this resolved by using color-scheme: light dark then?
Sepand Parhami
(In reply to Timothy Hatcher from comment #6)
> Is this resolved by using color-scheme: light dark then?
Nope, the original issue (on iOS) of nested scrollbars is not fixed with `color-scheme: light`. The ask is specifically for `color-scheme: light` (either specified, or defaulted) has dark colored nested scrollbars on iOS.
This works as expected on MacOS, but not iOS.
The `color-scheme: dark` (or `light dark` if you support both) is needed on MacOS to show the light colored scrollbars when in dark mode, which is the expected behavior.