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

Simon Lydell

Reported 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.

Attachments
Reproduction (686 bytes, text/html) 2022-10-29 11:50 PDT, Simon Lydell	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Simon Fraser (smfr)

Comment 1 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.

Radar WebKit Bug Importer

Comment 2 2022-11-05 11:51:18 PDT

<rdar://problem/101999469>

Simon Lydell

Comment 3 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`!

Simon Fraser (smfr)

Comment 4 2022-11-14 10:03:26 PST

Works as designed.

Note You need to log in before you can comment on or make changes to this bug.