2004627 - position:fixed element with top:auto and bottom:auto within position:sticky element behaves differently than in Edge

Status: UNCONFIRMED

(Core :: Layout: Positioned, defect)

Description

[6k64x4ma]

Attachment: test.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:146.0) Gecko/20100101 Firefox/146.0

Steps to reproduce:

1. Load the attached file.
2. Scroll down the page a bit.
3. Hover over the red element.

Actual results:

When I hover over the red element, it moves to a different location.
In Microsoft Edge, the red element is always on top of the green element.

Expected results:

I'm not sure what the correct behavior is, but the behavior in Firefox seems strange.

Comment 1

[David Shin[:dshin]]

Yeah, agree that this behaviour doesn't quite look right on Firefox.
I think this is related to bug 2002789 - We're positioning the fixed position element against GetPosition() value of the sticky element, which changes with scrolling, but then that position is in relation to the scrolled content, so that it looks stationary w.r.t. scrollport.
Incorporating the sticky element's position in relation to scrolled content causes the fixed element to move by the scroll amount, whenever the fixed element reflows, in this case due to :hover changing width.

Comment 2

[Timothy Nikkel (:tnikkel)]

Safari also seems a bit weird (in a different way) in how it handles this testcase.