Reputation: 1863

position: sticky not working in firefox

position:sticky is said to be working in firefox but I'm not seeing my sidebar stick.

My html looks like this:

<div class="wrap">

    <div class="sticky">side </div>    
    <div class="content">content <div>
<div>

My css:

.content{
    height: 2000px;
    overflow: hidden;
}

.sticky{
    position: sticky;
    width: 200px;
    float: left;
}

As I scroll down the sidebar scrolls with the content. It doesn't stick. Anyone know what could be the issue?

Upvotes: 18

Answers (13)

user22943114

Reputation:

Hey this could be a shot in the dark, but i just fixed this bug on my code, turns out i was setting a height of 100vh to my body element, my body element in this case is a section with id=body.

in the css file i put a height of 100vh for #body element, but turns out the sticky position type did not like that and only worked once i removed it.

Upvotes: 0

Tibor Bondar

Reputation: 1

I had the same issue. Try the following on the parent component:

transform: translate3d(0, 0, 0); 
overflow: inherit;

Upvotes: -1

S. Esteves

Reputation: 453

Just stumbled on this so it seems to still be an issue in 2022. I'll leave here what I had that allowed me to clearly replicate the OP and what I added to mitigate it.

div {
  position: sticky;
- display: inline;
+ display: block;
+ height: 100px;
  z-index: 2;
  top: 0;
}

Upvotes: 0

Weam Adel

Reputation: 260

In my case, the sticky element was taking a display: table; property, which when I changed to display: block;, the sticky was fixed in Firefox. So, have a look at the display property before considering other fixes.

Upvotes: 0

hhelsinki

Reputation: 1

I found the alt way with very simple but works.

position:fixed;
width:100%;
top:0;
z-index:1; /*depends on your elements*/

Work on every browsers, no bulls. If your topnav has a lot of elements, the sticky wil not working, I beleive it's because of some overflow:hidden;

Upvotes: 0

Bruno Bee Nahorny

Reputation: 49

To anyone still having this trouble:

Firefox uses the parent display as a rendering condition

So try making the child display: inline and parent display: inline

Remember that you still need to check the parent position and size for all browsers. Sticky is great but it is very case-specific use.

Upvotes: 0

arsCynic

Reputation: 37

I was able to fix it by using 'display: table-cell'.

My problem concerned a thead that didn't want to stick anymore on Firefox as soon as I fixed the same problem in Chrome by using display: block or inline-block.

Upvotes: 2

Akashxolotl

Reputation: 566

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    z-index: 1020;
    top: 86px;
    height: min-content;
}

Adding height: min-content; fixed my issue on firefox

Upvotes: -1

de.

Reputation: 8457

I have the same issue in 2020 - this post pops up first in google but none of the answers helped me.

The actual problem was that sticky doesn't play well with the parent element being display: flex.

References:
- position: sticky, works in Chrome but not in Firefox
- https://bugzilla.mozilla.org/show_bug.cgi?id=1488080

Upvotes: 19

roroland

Reputation: 174

Position sticky also don't work if the parent element is set to overflow: hidden because it can't calculate the height correctly.

Upvotes: 3

user316264

Reputation: 19

I had same issue, even though I set a top value, the sticky element would not stick. The solution was to set a value also for height...

Upvotes: 0

ioi-xd

Reputation: 174

position: sticky does not work on table elements such as tr as well as some others.

A workaround is to wrap whatever you want sticky inside a span element.

    <style>.sticky span {position: -webkit-sticky; position: sticky; top: 0;}</style> 
    <td class='sticky' valign='top' width='200'>
    <span>
        (table contents)
    </span>
    </td>

position: sticky not working in firefox

Answers (13)

Related Questions