Bug 247231

Summary:

linear-gradient unexpectedly overrides <meta name="theme-color"> for scroll area background

Product:

WebKit

Reporter:

Simon Lydell <simon.lydell.dev>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED INVALID

Severity:

Normal

CC:

bfulgham, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

Unspecified

OS:

macOS 12

Attachments:

Description	Flags
Reproduction	none

Description Simon Lydell 2022-10-29 11:50:35 PDT

Created attachment 463302 [details]
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.

Comment 1 Simon Fraser (smfr) 2022-11-02 14:15:29 PDT

What you're seeing in the broken cases is the impact of background-repeat; its initial value is 'repeat' so when the root background is a gradient, the gradient repeats at the edges.

Comment 2 Radar WebKit Bug Importer 2022-11-05 11:51:18 PDT

<rdar://problem/101999469>

Comment 3 Simon Lydell 2022-11-08 04:02:08 PST

Simon Fraser, thank you so much for telling me about background-repeat! I updated the demos with that information.

I then found a new much better workaround: Simply set `background-repeat: no-repeat` to have theme-color “win”! https://lydell.github.io/macos-safari-overscroll-bugs/7.workaround.theme-color.no-repeat.html

So, is it intended behavior that a repeating background-image “wins” over theme-color?

- If it is, it would be great if it could be documented somehow. I think I might not be the only one who struggled with theme-color!
- If not, well, then the bug should be fixed. But luckily it’s easy to work around with `background-repeat: no-repeat`!

Comment 4 Simon Fraser (smfr) 2022-11-14 10:03:26 PST

Works as designed.