1765525 - backdrop-filter effect is not clipped correctly on https://cdpn.io/jkantner/fullpage/VwKRgPy

Status: VERIFIED FIXED

(Core :: Graphics: WebRender, defect)

Description

[Gregory Pappas [:gregp]]

Attachment: capture.png

User Agent: Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:99.0) Gecko/20100101 Firefox/99.0

Steps to reproduce:

1. Navigate to about:config
2. Set layout.css.backdrop-filter.enabled to true
3. Restart the browser
4. Navigate to https://cdpn.io/jkantner/fullpage/VwKRgPy

Actual results:

The backdrop-filter effect does not correctly clip inside the top of the bottle

Expected results:

The backdrop-filter effect should clip inside the top of the bottle

Comment 1

[Glenn Watson [:gw]]

The clip-polygon applied to the wb__water element isn't being applied. So far it looks like the gecko display list that is sent to WR doesn't contain any image-masks, which seems surprising. Next step is to investigate why gecko doesn't add any clip-masks in this case.

Comment 2

[Glenn Watson [:gw]]

There's two potential problems here - I can dig in to this but Miko might have some ideas since I don't understand this part of the Gecko code very well.

1. The nsDisplayMasksAndClipPaths element gets created, but then in the WR display list there doesn't seem to be any image masks (or stacking context referencing them) created. What could be causing this?

2. As I understand it, the nsDisplayMasksAndClipPaths item should always create a stacking context with mask, rather than applying the image mask clip to the primitive. However, this will cause issues with the current backdrop-filter impl, which assumes the parent surface is the backdrop root. How difficult would it be to make the image-mask be part of the clip-chain applied to backdrop-filter primitives and avoid creating the stacking context with image-mask altogether?

Comment 3

[Glenn Watson [:gw]]

OK, so a few things I found out, but could still do with input from Miko:

• nsDisplayBackdropFilters currently derives from nsDisplayWrapList but I'm not really sure why. Does it need to be? From a WR perspective, it pushes a backdrop-filter display item with the list of filters included.

• If I change nsDisplayBackdropFilters to derive from nsPaintedDisplayItem then this test case works well - the clip-mask is correctly created and applied to the backdrop-filter primitive. Without this change, the bounding rect of the nsDisplayBackdropFilters is zero, meaning the mask doesn't get created.

• However, the change above then results in incorrect rendering of more complex backdrop filter examples that have text etc following that primitive. Maybe this is because my naive change didn't end up placing the backdrop-filter prim at the right part of the display list?

I guess the main things to work out are:

• What should nsDisplayBackdropFilters derive from?
• If that's nsPaintedDisplayItem how should I change the code so that it appends the filter primitive in the correct place?
• If that's nsDisplayWrapList why does it get a bounding rect of 0x0 in this test case, and how should that be fixed?

Comment 4

[Glenn Watson [:gw]]

Attachment: Bug 1765525 - Fix gecko DL creation for backdrop-filters with clips

Change to derive from nsDisplayEffectsBase, since the backdrop-filter
can still have a visual bounds (and effect) even if the child
stacking context has no items. Also use the same approach to get
the bounding rect and implement GetBounds as nsDisplayFilters uses.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bcc1a29ee9c8
Fix gecko DL creation for backdrop-filters with clips r=gfx-reviewers,lsalzman

Comment 6

[Narcis Beleuzu [:NarcisB]]

Backed out for wr failure on backdrop-filter-svg-foreignObject.html

Backout link: https://hg.mozilla.org/integration/autoland/rev/68f4a9b386d54cabfc17ae7dfeb1b8c545114ec9
Log link: https://treeherder.mozilla.org/logviewer?job_id=376868776&repo=autoland&lineNumber=13112

Comment 7

[Glenn Watson [:gw]]

Updated the patch, will get it re-reviewed then land

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2836ea872db2
Fix gecko DL creation for backdrop-filters with clips r=gfx-reviewers,miko

Comment 9

[bszekely]

https://hg.mozilla.org/mozilla-central/rev/2836ea872db2

Comment 10

[Giorgia Nichita, Release Desktop QA]

Reproduced this issue on an affected Nightly build from 2022-04-20, on Win 10 x64.
Verified as fixed on Firefox 102.0b4 (20220605185654) on macOS 10.15, Win 10 x64 and Ubuntu 21.04.