1628046 - backdrop-filter interacts poorly with picture caching

Status: RESOLVED FIXED

(Core :: Graphics: WebRender, defect, P3)

Description

[Connor Brewster [:cbrewster]]

Backdrop-filter can cause over-invalidation in cases where the backdrop is the entire page's content (no backdrop-root is formed). This may be an issue with how the backdrop picture is split out during scene building. Additionally, we may be re-rendering more of the backdrop required for the backdrop-filter effect.

For example on https://apple.com:
If you turn on gfx.webrender.debug.picture-caching, you will notice the entire page is invalidated while scrolling.

Comment 1

[Connor Brewster [:cbrewster]]

I did some investigate work on this, the main issue is the way the backdrop picture is cut from the scene. To get the backdrop picture, every stacking context from the top of the stack to the closest backdrop root ancestor has its primitives cut and wrapped in a picture primitive. This picture primitive uses the spatial node index from the stacking context it was cut from. Unfortunately, this means the new backdrop picture has the same spatial id as the backdrop root even if it has scrollable content. When slice creation happens, no slice is created for the scrollable content since the scrollable content is nested inside one or many pictures.

This means that if a website uses backdrop-filter on an element over the whole page (like the navbar on apple.com), no slice will be created for the scrollable content and everything will be invalidated while scrolling.

Backdrop picture cutting: https://searchfox.org/mozilla-central/rev/4166c15e2a99a23a9b38ad62c9fdfe8e5448b354/gfx/wr/webrender/src/scene_building.rs#3324

Comment 2

[Connor Brewster [:cbrewster]]

Attachment: Bug 1628046: Pick lowest spatial node when cutting an item sequence during scene building. r=gw

Suring scene building, slices are created by traversing primitive clusters on the root
picture and comparing spatial nodes. When backdrop-filter is used, a group of primtives
can be wrapped in a picture so they can be rendered to an intermediate target.

Previously, the wrapping picture used the spatial node index of the current stacking context,
but this prevents creation of slices for scrollable content within the wrapping picture.

This patch attempts to pick a lower spatial node for the wrapping picture so that the slicing
logic can still create a slice for scrollable content that is used as a backdrop for backdrop-filter.

Comment 3

[Connor Brewster [:cbrewster]]

Here are a couple videos of the picture cache debug overlay before/after my patch is applied:
Before patch: https://drive.google.com/file/d/1iMz51UaBTgQ1CnkmqG33EE3MBEL7wkRO/view?usp=sharing
After patch: https://drive.google.com/file/d/1dyIBoOOPqmEd6sBbwMPD8OzNFHS-REvs/view?usp=sharing

With the patch, a slice is created for the scrollable content, but there looks to be a second layer of tiles over the whole content area. Additionally, it looks like there are case where some tiles are invalidated when they don't need to be.

Comment 4

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

There's a r+ patch which didn't land and no activity in this bug for 2 weeks.
:cbrewster, could you have a look please?
For more information, please visit auto_nag documentation.

Comment 5

[Mayank Bansal]

Should this be closed?