Bug 267129 – `background-blend-mode` not applied when a layer has `background-clip: text`

• Status: NEW
• Component: CSS

Created attachment 469295 [details]
collage showing the expected vs. the Epiphany result in all 3 cases

Create a `div` with a 2 gradient layer `background` and apply a `background-blend-mode`:

```
.test {
  background:
    repeating-linear-gradient(45deg, #00f, #000 1rem) var(--clip, ), 
    linear-gradient(#f00, #000);
  background-blend-mode: lighten
}
```

Result: the two layers get blended as expected.

---

Now add some text in the `div`, make it `transparent` and set the top layer's `background-clip` to `text`.

Expected result: the blended result is restricted to the text area and we see just the bottom layer elsewhere.

What actually happens in Safari: the top layer gets clipped to the text area and we see just the bottom layer elsewhere, but no blending is applied in the text area where the layers overlap, so we only see the top layer.

---

Try clipping both `background` layers to `text`.

Expected result: the blended result is restricted to the text area and all else is transparent.

What actually happens in Safari: both layers get clipped to the text area, but no blending is applied, so we only see the top one.

Live test https://codepen.io/thebabydino/pen/MWxYYJw?editors=1100

I'm on Ubuntu, so I've only tested via Epiphany, but it's reproducible in Safari as well - see replies to https://twitter.com/anatudor/status/1743255827518017673

There are workarounds, but they involve using up a pseudo-element that wouldn't otherwise be needed at best and multiple text copies if more than one `background` layer needs to be restricted to `text`. If the text should also be `contenteditable` on top of that, things get even more complicated and we need a JS solution.

[Radar WebKit Bug Importer]

<rdar://problem/120901898>