[Webkit-unassigned] [Bug 247231] New: linear-gradient unexpectedly overrides <meta name="theme-color"> for scroll area background

Sat Oct 29 11:50:35 PDT 2022

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

            Bug ID: 247231
           Summary: linear-gradient unexpectedly overrides <meta
                    name="theme-color"> for scroll area background
           Product: WebKit
           Version: Safari 16
          Hardware: Unspecified
                OS: macOS 12
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: New Bugs
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: simon.lydell.dev at gmail.com

Created attachment 463302

  --> https://bugs.webkit.org/attachment.cgi?id=463302&action=review

Reproduction

<meta name="theme-color" content="magenta"> is used to color the of the “overscroll” area / rubber-banding effect: https://bugs.webkit.org/show_bug.cgi?id=222078

That works great, unless I add a linear-gradient as background-image on the <html> or <body> element.

Expected: The theme-color should *always* be used for the overscroll color.
Actual: The overscroll is colored using colors from the linear-gradient.

Minimal example:

    <meta name="theme-color" content="magenta" />
    <style>
      html {
        background-image: linear-gradient(blue, green);
        color: white;
        height: 100%;
      }
    </style>

Expected: Magenta overscroll at the top and the bottom.
Actual: Green overscroll at the top, blue at the bottom.

See the attached file for a full reproduction example.

Live demo: https://lydell.github.io/macos-safari-overscroll-bugs/
Specifically, this page shows how theme-color correctly “wins” over background-color: https://lydell.github.io/macos-safari-overscroll-bugs/3.meta-theme-color.background-color.html
And this page shows how linear-gradient unexpectedly “wins” over theme-color: https://lydell.github.io/macos-safari-overscroll-bugs/4.meta-theme-color.background-image.html
Here is a workaround: https://lydell.github.io/macos-safari-overscroll-bugs/6.workaround.theme-color.html

(Note: The live demo also showcases another unexpected behavior with the scroll area color and linear-gradient (the top gradient color is used for overscroll at the bottom, and vice versa), which you’ll inevitably run into when playing around with this – but that’s not what this particular bug report is about. I might create another bug report about it some other time.)

I tried with a JPEG background-image as well, and that also seemed to override the theme-color. So I suspect the background-image CSS property might be the problem in general, rather than just linear-gradient.

-- 
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/20221029/c8a69d49/attachment-0001.htm>