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

Description Sepand Parhami 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.

Comment 1 Radar WebKit Bug Importer 2020-01-27 22:52:14 PST

<rdar://problem/58946793>

Comment 2 Liam DeBeasi 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

Comment 3 Sepand Parhami 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;
}
```

Comment 4 Liam DeBeasi 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?

Comment 5 Liam DeBeasi 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!

Comment 6 Timothy Hatcher 2020-05-12 14:21:31 PDT

Is this resolved by using color-scheme: light dark then?

Comment 7 Sepand Parhami 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.