1776068 - backdrop-filter blur not working with linear gradient background

Status: RESOLVED FIXED

(Core :: Graphics: WebRender, defect)

Description

[bugzilla]

Steps to reproduce:

Using Firefox 101 and 103, having a background-image as css style for the body-element.

background-image: linear-gradient(rgba(255, 0, 0, 0.3),rgba(44, 255, 0, 0.3)), url('relativeUrl') !important;

the css-class also has

background-blend-mode: normal, multiply;
backdrop-filter: blur(3px);

set.

Actual results:

The image does not blur.
Removing the linear-gradient allows blur to be applied to the image (as expected)

Expected results:

The blur-effect should be applied to the background-image with the gradient. (this is also how chromium does it)

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Web Painting' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Mayank Bansal]

Can you please attach a minimal html page that reproduces the issue you describe above? Also please attach the contents of your about:support here.

Comment 3

[bugzilla]

Attachment: test.html

This is a small testpage that shows the unexpected behaviour

Comment 4

[Mayank Bansal]

can confirm that Nightly doesnt apply the blur and Chrome does.

Comment 5

[Glenn Watson [:gw]]

This seems to work for me if I remove the background-blend-mode - I suspect that this involves creating a surface in the way gecko/wr currently works, which is what will end up becoming the backdrop root.

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:gw, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 7

[mail]

(In reply to Glenn Watson [:gw] from comment #5)

This seems to work for me if I remove the background-blend-mode - I suspect that this involves creating a surface in the way gecko/wr currently works, which is what will end up becoming the backdrop root.

I can confirm removing background-blend-mode from elements which are behind the element with applied backdrop-filter (talking about z-index) is working.

Comment 8

[Mayank Bansal]

Fixed by bug 1776068