RESOLVED INVALID247231
linear-gradient unexpectedly overrides <meta name="theme-color"> for scroll area background 
https://bugs.webkit.org/show_bug.cgi?id=247231
Summary linear-gradient unexpectedly overrides <meta name="theme-color"> for scroll a...
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.