1553434 - [css-sticky][css-flexbox] Auto Margin fails to create correct SCR, accidentally only as large as sticky element plus dimension of sibling content

Status: RESOLVED DUPLICATE of bug 1488080

(Core :: Layout, defect, P3)

Description

[jonjohnjohnson]

Attachment: case-gecko-sticky-flex-marg-auto.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

1. Open test case in chrome and notice salmon background element sticks to bottom of pink background scrollport inside its yellow containing block.
2. Open case in gecko and see the salmon element only start to scroll into view when scrolling down to the bottom edge. It begins scrolling in at the distance which is exactly the height of it's sibling content, the purple block, from the bottom edge.

Actual results:

Compare chrome and firefox.

Expected results:

The Salmon block has a margin-top set to auto. This does move it's flow placement to the bottom edge of its flex container, but somehow doesn't correctly inform its SRC.

Can remedy with using justify-content set to space-between on flex container, but this is still a spec violation regardless.

In the test case, there is a focus pseudo class on the purple, sibling content, block which increases its height, and shows the salmon element become stuck at the initial scroll position only because the SCR is then *just enough to allow sticking at that size.

Comment 1

[jonjohnjohnson]

Attachment: Scrolling test case in chrome, left, and firefox, right

Comment 2

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

The priority flag is not set for this bug.
:dbaron, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 3

[Daniel Holbert [:dholbert]]

See also bug 1488080 and bug 1377072 about position:sticky and flexbox not playing well. This may be a dupe of one of those.

Comment 4

[jonjohnjohnson]

Now that I see bug 1488080, I'm pretty sure this just is a duplicate, though I like how my attached test case shows the nuanced effects of sizing/positioning of sibling flex items.

I'm pretty certain bug 1377072 is less related to this issue, being more about an SCR inaccurately "constrained" by a flex containers height/width that has overflowing content. Like is said in that issue.