Floated element pushes sticky element out of position




4 years ago
4 years ago


(Reporter: eric101111, Unassigned)


33 Branch

Firefox Tracking Flags

(Not tracked)



(2 attachments)



4 years ago
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.101 Safari/537.36

Steps to reproduce:

See http://codepen.io/anon/pen/ErHin.

I placed a sticky <nav> above a non-floated <article> and a floated <article>.

Actual results:

When I scroll down, the sticky <nav> fixes in position (10px from the top of the screen) while scrolling through the non-floated <article>. However, when the bottom of the <nav> encounters the top of the floated <article>, the floated <article> begins to push the <nav> out of position and off the screen.

Expected results:

The <nav> should have remained fixed 10px from the top, scrolling through the floated <article> as it did through the non-floated <article>.
Component: Untriaged → Layout
Product: Firefox → Core
David, any idea what's going on here?
Flags: needinfo?(dbaron)

Comment 2

4 years ago
I'm facing this bug when using "position: sticky;" with Bootstrap v2.2.2 (I know this is a very old version).
Robert, do you know who owns the position:sticky code?
Ever confirmed: true
Flags: needinfo?(roc)
I don't know what the state of the position:sticky spec is here (or whether the spec is actually worth believing yet, which last I checked it wasn't), but this seems like the underlying issue here might be a difference between how WebKit and Gecko size either the root or body element (I'd have to check which is the sticky containing block) when the tallest thing in it is a float.
Flags: needinfo?(dbaron)
Assignee: nobody → kgilbert
Flags: needinfo?(roc)
Ah right. This is probably not a bug. "foo"'s containing block is the <body>, and <body> ends above the float.
Assignee: kgilbert → nobody
Created attachment 8535382 [details]
testcase that also has -webkit-sticky, and has a border on body
So our behavior matches WebKit here once I add -webkit-sticky.

Basically, sticky elements are "sticky" only while they're inside their containing block.  In this case the bottom of body is well above the bottom of the float, so once the bottom of body scrolls to match the bottom of the sticky element, the sticky element starts scrolling off. That's just how sticky works.
Last Resolved: 4 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.