1825392 - position: sticky css with transform-style: preserve-3d ancestor doesn't stick to viewport

Status: NEW

(Core :: Web Painting, defect)

Description

[karstenroberts]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/112.0

Steps to reproduce:

I am creating a web page that utilizes position: sticky alongside a parallax effect on content using transform-style: preserve-3d.

Here is a jsfiddle demoing the issue: https://jsfiddle.net/783oetfv/1/

Actual results:

As soon as I add transform-style: preserve-3d to a parent element, the child with position: sticky no longer sticks to the top of the window when scrolled past.

In the jsfiddle, note that the right-hand column does not stick. If you remove transform-style: preserve-3d from the ancestor it does.

Expected results:

The expected result is that as I scroll past the element with position: sticky, that content sticks to the top of the window.

I have confirmed that this behaves as expected on Chrome and Safari, but on Firefox, both regular and developer edition, it does not.

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

[Emilio Cobos Álvarez (:emilio)]

Attachment: Test-case from comment 0

Comment 3

[Emilio Cobos Álvarez (:emilio)]

If you look at the inspector, the sticky item actually sticks (during layout at least), so this seems like a graphics or display-list building issue. Would be great to have a regression range.

Comment 4

[Alice0775 White]

Regression window w/ forcibly enabled WebRender:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=40df5dd35fdb7ce3652fe4448ac8961c075c928e&tochange=3e95c596ad5bc0c0b99608ed26380994973e7665

Suspect: Bug 1411627

Comment 5

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

:kats, since you are the author of the regressor, bug 1411627, could you take a look?

For more information, please visit auto_nag documentation.

Comment 6

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

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

For more information, please visit auto_nag documentation.

Comment 7

[Timothy Nikkel (:tnikkel)]

Botond, does this bug sound similar to any other position sticky bugs that you know of?

Comment 8

[Botond Ballo [:botond]]

As it happens, I was just looking at bug 1818665 earlier today, and the testcase here has a lot in common with that one (sticky element inside perspective transform seems to get mispositioned during display list building). While I can't be completely confident that this bug is a duplicate, I think there's a good chance it is, and it probably makes sense to investigate one of them first and then re-test the other.