Bug 241079

Summary: Combination CSS image (gradient) and SVG asset as CSS mask doesn’t render correctly until highlighting/selecting the masked element
Product: WebKit Reporter: Noah Liebman <noah>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, bfulgham, sabouhallawa, simon.fraser, webkit-bug-importer, webkitbugs, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: Mac (Intel)   
OS: macOS 12   
Attachments:
Description Flags
actual result
none
Demo of making mask-image work by unfocusing Safari's window none

Description Noah Liebman 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.
Comment 1 Simon Fraser (smfr) 2022-05-31 14:15:41 PDT 
Thanks for the report, I can reproduce this.
Comment 2 Radar WebKit Bug Importer 2022-06-05 10:08:12 PDT 
<rdar://problem/94406306>
Comment 3 Tixie 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
Comment 4 Tixie 2023-08-01 09:36:32 PDT 
Created attachment 467169 [details]
Demo of making mask-image work by unfocusing Safari's window
Comment 5 Ahmad Saleem 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.