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)
Core
Layout: Scrolling and Overflow
Tracking
()
NEW
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:
- Click the pin/thumbtack icon at the top left.
- Load attached testcase (original URL: https://jsfiddle.net/vctls/mac2Ls0d/16/ )
- 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 )
Reporter | ||
Comment 1•2 years ago
|
||
Here's a reduced testcase.
STR here:
- Scroll the scrollable area to the bottom.
- 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).
Reporter | ||
Comment 2•2 years ago
|
||
(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 viaclear:both
.)
Reporter | ||
Updated•2 years ago
|
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.
Description
•