Open Bug 1781297 Opened 2 years ago Updated 2 years ago

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

Categories

(Core :: Layout: Scrolling and Overflow, defect)

defect

Tracking

()

People

(Reporter: dholbert, Unassigned)

References

(Depends on 1 open bug)

Details

Attachments

(2 files)

[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 )

Attached file testcase 2 (reduced) (deleted) —

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).

(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.)
Summary: Content moves down in the scrollport, when a reflow occurs, with position:sticky → Content moves down in the scrollport, when a reflow occurs, with "float:left;position:sticky" element followed by some cleared tall content
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: