[Webkit-unassigned] [Bug 240324] New: REGRESSION (Safari 15.4) CSS mask-image with multiple gradients no longer works

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=240324

            Bug ID: 240324
           Summary: REGRESSION (Safari 15.4) CSS mask-image with multiple
                    gradients no longer works
           Product: WebKit
           Version: Safari 15
          Hardware: iPhone / iPad
                OS: iOS 15
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: aquaductape at gmail.com

Created attachment 459191

  --> https://bugs.webkit.org/attachment.cgi?id=459191&action=review

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220512/b1258e34/attachment.htm>