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 Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

ahmad.saleem792, bfulgham, sabouhallawa, simon.fraser, webkit-bug-importer, webkitbugs, zalan

Priority:

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

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.