WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
REOPENED
206771
[iOS] Nested container scrollbars always follow dark theme preference
https://bugs.webkit.org/show_bug.cgi?id=206771
Summary
[iOS] Nested container scrollbars always follow dark theme preference
Sepand Parhami
Reported
2020-01-24 14:39:50 PST
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
Comment 1
2020-01-27 22:52:14 PST
<
rdar://problem/58946793
>
Liam DeBeasi
Comment 2
2020-03-31 07:30:16 PDT
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
Comment 3
2020-03-31 10:23:30 PDT
(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
Comment 4
2020-03-31 10:27:42 PDT
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
Comment 5
2020-03-31 13:10:40 PDT
Answered my own question:
https://webkit.org/blog/8840/dark-mode-support-in-webkit/
. Thanks for the help!
Timothy Hatcher
Comment 6
2020-05-12 14:21:31 PDT
Is this resolved by using color-scheme: light dark then?
Sepand Parhami
Comment 7
2020-05-12 14:54:03 PDT
(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.
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