1685324 - Generated content (:before/:after) and mix-blend-mode and backdrop filter work inconsistently

Status: RESOLVED WORKSFORME

(Core :: Graphics: WebRender, defect)

Description

[Stephan]

Attachment: blend-mode.png

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

Steps to reproduce:

Here is an example: https://jsfiddle.net/dy9vf6Lp/2/

Three wrappers have generated content with :before/:after, one of which has a mix-blend-mode and the other has a backdrop filter applied. In the first wrapper the :before pseudo-element has the blend mode and the :after pseudo-element has the backdrop filter; in the second wrapper, it’s vice versa (:before has filter, :after has blend mode). In the third wrapper there is just a blend mode applied to the :after pseudo-element.

Actual results:

The blend mode seems to fail if it is applied to an element after another element with backdrop filter. If you add a backdrop filter to #example3:before the blend mode works on the previous wrapper’s generated content.

Also, turn around the applied properties on #example3:before and #example3:after (i. e. change “before” to “after” and vice versa, so that the blend mode is applied to :before and the backdrop filter is applied to :after) and you’ll see the blend mode working in the third wrapper, too.

Expected results:

The blend mode should work regardless of the order of application, and especially in unrelated elements.

Comment 1

[Hani Yacoub, Desktop QA]

Managed to reproduce on Windows 10 x64, Ubuntu 20.04 x64 and on MacOS 10.15.

Comment 2

[Mayank Bansal]

Attachment: Screenshot 2023-10-10 234851.png

This is what I get on the latest Nightly.
Stephan, do you still see this bug on latest Nightly (or release version)?

Comment 3

[Stephan]

I don’t see this bug in Firefox 118.0.1, so I guess this is fixed. Thanks very much.

Comment 4

[Mayank Bansal]

Thanks for confirming!