Bug 241079 - Combination CSS image (gradient) and SVG asset as CSS mask doesn’t render correctly until highlighting/selecting the masked element
Summary: Combination CSS image (gradient) and SVG asset as CSS mask doesn’t render cor...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Intel) macOS 12
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2022-05-29 10:07 PDT by Noah Liebman
Modified: 2024-02-09 17:11 PST (History)
7 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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.