Open Bug 1488080 Opened Last year Updated 4 months ago

position: sticky doesn't work properly with flexbox

Categories

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

61 Branch
defect

Tracking

()

ASSIGNED
Tracking Status
firefox-esr52 --- unaffected
firefox-esr60 --- unaffected
firefox61 --- wontfix
firefox62 --- wontfix
firefox63 --- wontfix
firefox64 --- wontfix
firefox65 --- fix-optional

People

(Reporter: mailnew4ster, Assigned: dholbert)

References

Details

(Keywords: regression, testcase)

Attachments

(2 files)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Steps to reproduce:

Context:
https://stackoverflow.com/questions/52137323/position-sticky-works-in-chrome-but-not-in-firefox/52137686

Demo:
http://jsfiddle.net/1p4gtruk/34/

Works properly on Chrome and Edge, so it's probably a Firefox issue.

HTML:
====================================
<div id="container" class="d-flex flex-column">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="d-flex flex-column last">
      <div class="flex-item mt-auto last-inner">3</div>
    </div>
</div>

CSS:
====================================
#container {
    height: 1000px;
}

#container .last {
    flex: 1;
}

#container .last-inner {
    position: sticky;
    bottom: 0;
}


Actual results:

The bottom div is at the bottom of the containing div.


Expected results:

The bottom div will be at the bottom of the viewport instead of at the bottom of the containing div.
Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=2ac2b364cf5d83c6a336622cbda6b3ddb5f1e799&tochange=55602e9462ae04c0023339cda4b10ffa40d481c3


Regressed by: Bug 1298008



:bradwerth,
Your bunch of patch causes the regression, can you please look into this?
Blocks: 1298008
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Ever confirmed: true
Flags: needinfo?(bwerth)
Keywords: regression
Product: Firefox → Core
Component: Layout → Layout: Positioned
Assignee: nobody → bwerth
Flags: needinfo?(bwerth)
Has Regression Range: --- → yes
Has STR: --- → yes
Keywords: testcase
Priority: -- → P3
Happy to take a patch in nightly; if it seems low risk enough please feel free to request uplift to 65 beta.
Attached file Self-contained example
I've attached an example demonstrating this failing my use case, hopefully it will serve as an addition check for any patch.  If you add `width:100%; height:100%;` to the sticky element then it renders, but removing `right: 0;` breaks it again.
See Also: → 1553434
Duplicate of this bug: 1553434

Hey bradwerth, the only thing noteworthy in the duplicate bug 1553434 is that the current SCR creation in gecko is relative to the space in a flex container left aside from other flex items.

If you add this ruleset into the attached "stand alone test html" - https://bug1488080.bmoattachments.org/attachment.cgi?id=9005905

.last::before { content: ''; height: calc(2000px - 100vh - 16px); background: #99f; }

You'll see the bottom sticky block will scroll into view just as you start scrolling from the top of the page, because a previous sibling element takes up space in the flex container, which is sized to the containers height minus the margin on the body and the scrollport height.

Brad's been focused on other priorities, so I'll tentatively steal this from him [with his blessing], though I may not get to it right away.

Assignee: bwerth → dholbert
Status: NEW → ASSIGNED
You need to log in before you can comment on or make changes to this bug.