Bug 221537 – Either Implement CSS mask-composite: intersect or make it not completely hide content

• Component: CSS
• Status: NEW

[John A. Bilicki III]

Created attachment 419555 [details]
Browser is latest Waterfox 56 ("Classic")

Recently I was debugging an unrelated problem and discovered that WebKit wasn't rendering -webkit-mask-composite: intersect; or mask-composite: intersect;. The images on the front page of a https://www.oilsinharmony.com/ and the related item pages simply would not be displayed (I will try to address this somehow so I'll post the original code).

img[src^="images/shop/"]
{
 mask: linear-gradient(to top, transparent 10%, #fff 15%, #fff 90%, transparent 95%), linear-gradient(to left , transparent 10%, #fff 15%, #fff 90%, transparent 95%);  mask-composite: intersect;
 -webkit-mask-composite: source-in;
 mask-position: center;
 mask-repeat: no-repeat;
 mask-size: 110% 110%;
}

It works fine in all of the other browsers except Otter which is also WebKit based. The primary problem is that if the property/value pair isn't directly supported I'd imagine it'd be more appropriate to have no effect however CSS masks are not (at least currently) a strong point for me.

I've attached a screenshot of what it's supposed to look like. Tested in latest stable build of Safari 14.0 and Safari 14.1 Release 119.

[Smoley]

Thanks for filing, Apple internal see also:
rdar://71009017
rdar://72900690