NEW241079
Combination CSS image (gradient) and SVG asset as CSS mask doesn’t render correctly until highlighting/selecting the masked element 
https://bugs.webkit.org/show_bug.cgi?id=241079
Summary Combination CSS image (gradient) and SVG asset as CSS mask doesn’t render cor...
Noah Liebman
Reported 2022-05-29 10:07:36 PDT
Created attachment 459838 [details] actual result When using a CSS mask that is both a linear gradient and SVG image, the gradient is ignored until after selecting the masked element. ``` mask-image: linear-gradient(to bottom, #000, #000 calc(100% - 38px), #0000 calc(100% - 38px), #0000), url("bottomwave.svg"); ``` Each mask works individually. [Demo](https://projects.noahliebman.net/safari-svg-multiple-mask-bug/) The issue does not occur on every reload, but it occurs much of the time. See attachment for video demo.
Attachments
actual result (314.24 KB, video/mp4)
2022-05-29 10:07 PDT, Noah Liebman 		no flags
Details
Demo of making mask-image work by unfocusing Safari's window (3.86 MB, video/mp4)
2023-08-01 09:36 PDT, Tixie 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2022-05-31 14:15:41 PDT
Thanks for the report, I can reproduce this.
Radar WebKit Bug Importer
Comment 2 2022-06-05 10:08:12 PDT
<rdar://problem/94406306>
Tixie
Comment 3 2023-08-01 09:34:55 PDT
I'm reproducing its weird bug while using ⌘A, but don't know about the "seemingly wait an arbitrary amount of time". However I've noticed it start working the moment Safari's window loose focus
Tixie
Comment 4 2023-08-01 09:36:32 PDT
Created attachment 467169 [details] Demo of making mask-image work by unfocusing Safari's window
Ahmad Saleem
Comment 5 2024-02-09 17:11:33 PST
It is reproducible in Safari Technology Preview 188. Adding BrowserCompat tag since Firefox Nightly 124 and Chrome Canary 123 are working fine both.
Note You need to log in before you can comment on or make changes to this bug.