Bug 240324 - REGRESSION(r286795): -webkit-mask-composite behaves differently with multiple masks
Summary: REGRESSION(r286795): -webkit-mask-composite behaves differently with multiple...
Status: RESOLVED DUPLICATE of bug 241541
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 15
Hardware: iPhone / iPad iOS 15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-05-11 17:30 PDT by Caleb
Modified: 2022-06-23 12:09 PDT (History)
7 users (show)

See Also:


Attachments
div red box that uses mask image with multiple gradients (2.09 MB, image/png)
2022-05-11 17:30 PDT, Caleb
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Caleb 2022-05-11 17:30:00 PDT
Created attachment 459191 [details]
div red box that uses mask image with multiple gradients

Recent Safari/iOS 15.4 broke css mask image where you can have multiple gradients.

In the recent Safari notes https://developer.apple.com/documentation/safari-release-notes/safari-15_4-release-notes, mask property is added as well as long forms and webkit-mask is aliased.

I'm not sure which mask property is causing the regression, the mask-image or the mask-composite.

The following code works in Chrome and Firefox, and used to work before Safari/iOS 15.4, the last version where it worked was Safari/iOS 15.2

```css
div {
    -webkit-mask-image: linear-gradient(to right, transparent 0px, rgb(0, 0, 0) 50px), linear-gradient(to left, transparent, rgb(0, 0, 0) 50px);
    mask-image: linear-gradient(to right, transparent 0px, rgb(0, 0, 0) 50px), linear-gradient(to left, transparent, rgb(0, 0, 0) 50px);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
```

Here's demo example that uses mask image with multiple gradients.
Code Demo: https://codepen.io/Kahlub/pen/QWQKLqe

A library uses this mask image with multiple gradients feature https://github.com/aquaductape/solid-scroll-shadows, but now it's broken due to Safari/iOS 15.4
Comment 1 Caleb 2022-05-11 17:33:11 PDT
I forgot to mention, by broken, I mean the element where the mask image is applied to is no longer visible
Comment 2 Radar WebKit Bug Importer 2022-05-11 22:40:04 PDT
<rdar://problem/93152779>
Comment 3 Simon Fraser (smfr) 2022-05-18 13:55:48 PDT
Presumably regressed at r286795.
Comment 4 Tim Nguyen (:ntim) 2022-05-22 23:59:45 PDT
There are 2 issues here (thank you Matt for giving more details):
1. -webkit-mask-composite: source-in now computes to -webkit-mask-composite: source-in, source-in  instead of -webkit-mask-composite: source-in, source-over for multiple gradients since r286795
2. -webkit-mask-composite: source-in/mask-composite: intersect has different behavior on a single gradient compared to other browsers, but this pre-dates r286795 (tested on an older computer)

1. can be fixed by restoring the old behavior for -webkit-mask-composite, but the testcase wouldn’t be fixed until 2. is fixed too, since it uses both prefixed and unprefixed versions.
Comment 5 Tim Nguyen (:ntim) 2022-05-23 00:08:50 PDT
mask-composite behaves per-spec, the only possible action item here is change the prefixed version.
Comment 6 Brent Fulgham 2022-06-23 12:07:24 PDT
*** Bug 241004 has been marked as a duplicate of this bug. ***
Comment 7 Brent Fulgham 2022-06-23 12:09:37 PDT

*** This bug has been marked as a duplicate of bug 241541 ***