1624544 - CSS filter causes sticky element to move during scroll

Status: RESOLVED FIXED

(Core :: Panning and Zooming, defect, P3)

Description

[Michel Le Bihan]

Attachment: sticky-filter-test.html

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

Steps to reproduce:

1. Open https://staszic.waw.pl/
   UPDATE: They implemented the workaround from https://bugzilla.mozilla.org/show_bug.cgi?id=1624544#c1, so they are no longer a goot test case. Please use https://bugzilla.mozilla.org/attachment.cgi?id=9135357
2. Scroll

I attach a modified example from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element

Actual results:

Sticky element: navbar moves during scroll and does not stay on top

Expected results:

Sticky element: navbar should stick

Comment 1

[Michel Le Bihan]

When the filter is applied separately to all elements inside body (separately to the sticky element and the rest), this issue is not present.

Comment 2

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

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Works with WebRender enabled, so probably an APZ issue of sorts.

Comment 4

[Michel Le Bihan]

Also works form me with WebRender enabled on desktop.
Firefox Preview on Android is also affected and it is much worse. After scrolling I need to wait about 1sec for the navbar to move to the top.

Comment 5

[Michel Le Bihan]

I looked at similar issues on bugzilla and tested setting apz.paint_skipping.enabled to false, but it had no effect on this problem.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

This is the regression range I got: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=891ee0d0ba3ec42b6484cf0205b3c95e21c58f74&tochange=096c0f407f8ba3ef7cfe4e0b831761993cac38b1

Which includes bug 1143856, so this has been an issue for as long as async scrolling has been enabled.

Comment 7

[Michel Le Bihan]

https://staszic.waw.pl/ implemented the workaround from https://bugzilla.mozilla.org/show_bug.cgi?id=1624544#c1, so it's no longer a good test case.

Comment 8

[Kartikaya Gupta (email:[e-mail])]

This is mostly expected behaviour with non-webrender since the filter will cause the contents to get rasterized together. I verified with a local build that the sticky position item ends up in an basic layer tree as a result of the filter, and so APZ can't reposition it in the compositor.

Given that WR will fix this, and there's a workaround (per comment 7) I'm going to mark this as P3.

Comment 9

[Firefox Bug Husbandry Bot]

Because this bug's Severity has not been changed from the default since it was filed, and it's Priority is P3 (Backlog,) indicating it has been triaged, the bug's Severity is being updated to S3 (normal.)