1794432 - backdrop-filter blur renders incorrectly after scrolling down on this page

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[Markus Stange [:mstange]]

Attachment: screen recording

Steps to reproduce:

1. Load this page: https://serenityos.org/happy/4th/
2. Scroll down.

Expected results:
The blur effect in the header should always look like a normal blur.

Actual results:
At some point in the page, depending on the window height, the effect changes: It starts to look like a text-shadow instead. So it seems that the text is drawn twice, first with blur and then again without a blur on top.

Comment 1

[Markus Stange [:mstange]]

Attachment: web page capture, for posterity

Comment 2

[Alice0775 White]

FWIW
Setting layers.force-active to true in about:config fixes this issue.

Comment 3

[Ashley Hale [:ahale]]

I notice that if I zoom out (30% scale) with ctrl-minus, it happens basically immediately without any scrolling, and if I reduce the window height it goes back to regular blur. Whereas if I increase zoom (e.g. 200% scale) it is possible to scroll further before it happens (zooming in too much causes the CSS element for the top navbar to disappear, so this can only go so far for testing). My instincts point to the amount of primitives being rendered into the surface being a factor, but I'm not sure, it may be a limit in actual page coordinates.

Most pages aren't triggering this so I assume S3 severity is reasonable for now.

NeedInfo - is there some limit being reached here in terms of coordinates or primitives or is the mechanism likely something else?

Comment 4

[Glenn Watson [:gw]]

I'm not sure what would be the cause of this, will need investigation.

Comment 5

[Nick]

Removing the iframes with the embeded Youtube videos restores the blur effect on the header. Also, after scrolling past the iframes, the blur works again as expected. I have no idea what is causing this behavior, but I also noticed that only the last Youtube video in the DOM seems to get blured (when the header is above) but nothing else.

It is only a problem with Youtube videos. Embeds from other sources seem to work just fine.