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)
Core
Layout
Tracking
()
NEW
People
(Reporter: julienw, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(1 file)
6.90 KB,
text/html
|
Details |
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.
Reporter | ||
Updated•6 years ago
|
status-firefox58:
--- → affected
Comment 1•6 years ago
|
||
This seems to be a duplicate of Bug 1414874
Reporter | ||
Comment 2•6 years ago
|
||
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.
Comment 4•6 years ago
|
||
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.
Comment 5•6 years ago
|
||
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
Comment 6•6 years ago
|
||
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.
Comment 7•6 years ago
|
||
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.
Updated•2 years ago
|
Severity: normal → S3
Updated•4 months ago
|
You need to log in
before you can comment on or make changes to this bug.
Description
•