1804429 - backdrop-filter breaks when applied over element with mix-blend-mode

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect)

Description

[Alexander A.]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:107.0) Gecko/20100101 Firefox/107.0

Steps to reproduce:

1. Add a img element and apply a mix-blend-mode to it. I tested it with multiply and screen.
2. Add a position: fixed; div with a backdrop-filter above it. The specific filter does not matter, all of them are broken. Blur showes the problem best.

Codepen: https://codepen.io/Onlinezwang/pen/ExRreYG
The graphical artifacts are the same as Bug 1800206.

Actual results:

The backdrop filter breaks on the entire page. In case of blur, text retains its outlines but recieves a sort of shadow. The embeded video is blurred in the middle, but not at the edges, as are images.

It also happens in Firefox Nighly 109.0a1 (2022-12-06) and Chrome 108.0.5359.94.

Expected results:

The effect should be rendered correctly. It works in Safari 16.1 (18614.2.9.1.12).