1781297 - Content moves down in the scrollport, when a reflow occurs, with "float:left;position:sticky" element followed by some cleared tall content

Status: NEW

(Core :: Layout: Positioned, defect, P3)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (from reporter) note: depends on external cloudflare-hosted CSS libraries

[I'm spinning this off from bug 1618029 comment 3. Thanks to @toulousevictor for the bug report over there.]

STR:

1. Click the pin/thumbtack icon at the top left.
2. Load attached testcase (original URL: https://jsfiddle.net/vctls/mac2Ls0d/16/ )
3. Scroll down and hover the green folder icon at the very bottom.

EXPECTED RESULTS:
A "shrink" animation should play on the folder.

ACTUAL RESULTS:

• All of the content from the top of the page seems to snap into the current position of the scrollport
• The folder icon gets thrown off the bottom (creating additional scrollable area)
• If you try to scroll up, there's a bunch of blank space before the content now.

Chrome gives EXPECTED RESULTS.
Firefox Nightly 104 gives ACTUAL RESULTS.

(Note: It seems possible this is a version of https://bugzilla.mozilla.org/show_bug.cgi?id=1748891 )

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (reduced)

Here's a reduced testcase.

STR here:

1. Scroll the scrollable area to the bottom.
2. Repeatedly hover/unhover the "Hover me" text.

ACTUAL RESULTS: The scrollbar shows that the scrollable area keeps getting taller (with the content all being moved to the very end).

Comment 2

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #0)

(Note: It seems possible this is a version of https://bugzilla.mozilla.org/show_bug.cgi?id=1748891 )

The interesting wrinkle here:

• the sticky-positioned thing is also a float
• the content that's "propping up" the furthest scrollable area is not itself sticky-positioned, though it is cleared to be below the sticky float, and that clearance seems to be necessary to trigger the bug. (In the original testcase it's cleared via width:100% which forces it below the float so that it fits; in testcase 2, I clear it explicitly via clear:both.)

Comment 3

[Botond Ballo [:botond]]

This is kind of reminiscent of bug 1797307, I wonder if it's a duplicate.

Comment 5

[Daniel Holbert [:dholbert]]

Comment on attachment 9287106 [details]
testcase 1 (from reporter) note: depends on external cloudflare-hosted CSS libraries

Sorry, I think testcase 1 must've been the completely wrong file-attachment here. Fortunately the jsfiddle link is still valid. Let me repost a version of that.

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (not reduced)

Here's a bugzilla-hosted version of the jsfiddle. This still reproduces the bug for me (though testcase 2 is more reduced and probably better for reasoning about).

The jsfiddle version uses fontawesome for some icons; I replaced the fontawesome stuff with just regular descriptive text ("STEP 1... STEP 2")

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: screencast of bug with testcase 1

Comment 8

[Hiroyuki Ikezoe (:hiro)]

Moving into Layout: Positioned.