[Webkit-unassigned] [Bug 206771] New: Nested container scrollbars always follow dark theme preference

Fri Jan 24 14:39:50 PST 2020

https://bugs.webkit.org/show_bug.cgi?id=206771

            Bug ID: 206771
           Summary: Nested container scrollbars always follow dark theme
                    preference
           Product: WebKit
           Version: Safari 13
          Hardware: iPhone / iPad
                OS: iOS 13
            Status: NEW
          Severity: Trivial
          Priority: P2
         Component: Scrolling
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: sparhami at apple.com

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200124/7edbac93/attachment-0001.htm>