Open Bug 1434265 Opened 6 years ago Updated 4 months ago

When a sticky element contains itself a high absolute element, the container's scrollHeight grows as we scroll

Categories

(Core :: Layout, defect, P3)

defect

Tracking

()

Tracking Status
firefox58 --- affected
firefox60 --- affected

People

(Reporter: julienw, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

Attached file testcase-sticky.html
STR:
1. Open the attachment.
2. Scroll down the text.
=> Notice how the container's "scrollHeight" increase once we reach the bottom of the container.

Note this works fine in Chrome.
This seems to be a duplicate of Bug 1414874
Karl, I don't think so. Bug 1414874 is about how we scroll page by page so purely a UX problem, but here it's (IMO) a layout bug.
[ Triage 2017/02/20: P3 ]
Priority: -- → P3
As I peruse through issues regarding "sticky", I just wanted to add more clarity that the issue isn't just a "high" or tall sticky element in general, it's that firefox has trouble making it's "sticky constraint rectangle" when the sticky positioned element is larger than it's scrolling contexts "scrollport" (in the sticking axis).

For the test case, in your inspector, you can remove the absolute positioning for ".header-content" (though then I'd suggest reducing the opacity for the sticky element to visualize clearly) alter the height of the ".header-content" to 501px (merely 1px taller than it's scrollport) and notice every pixel scrolled, alters the scrollHeight at hand by that magnitude.

This issue doesn't relate to absolute position scheme. Notice webkit/blink behavior simply clipping the bottom of the sticky element until reaching the end of the scroll context and scrolling it in. But again, remove absolute position to examine.
Though not an exact duplicate, I'm guessing the root cause here is the same as this issue...

"Sticky position outside scroll clip can cause scroller to grow infinitely."
https://bugzilla.mozilla.org/show_bug.cgi?id=1314422
Though something unique to this issue is that while other browsers use the '0' value for the sticky elements height to compute the "sticky constraint rectangle", firefox is actually using the height of the sticky elements content, which technically overflows itself? Also, notice how adding "overflow: scroll" to ".header" in the testcase, behaves in blink (0 height to scroll) verses firefox (".header" inherits the height of the text inside ".header-contents", though it's using absolute positioning scheme)? But "overflow: auto" uses "0" for height in both browsers.
Also, the bug is remedied, if the scolling element isn't also playing the role of containing block. Notice when you alter the testcase to have an extra <div> inside ".container" around it's contents. But this shows compat issues with reaching the other end of the overflowing sticky element between webkit/blink not adding the extra scrollHeight that firefox does.
See Also: → 1314422
Severity: normal → S3

This still reproduces in recent versions.

Blocks: sticky
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: