position: sticky not working in firefox

Question

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?

As of Feb 2018 `position: sticky` for `th` still doesn't work in FF `58.0 (64-bit)`. Three years behind! — Green, Feb 01 '18 at 08:40
Yep it still doesn't work on thead and tr elements in ff chrome opera and maybe more browsers — willy wonka, May 18 '18 at 07:05

score 17 · Answer 1 · answered Mar 26 '20 at 23:42

17

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

answered Mar 26 '20 at 23:42

de.

7,068
3
40
69

I'm so bummed that this bug hasn't been fixed yet. I guess it's low priority but it breaks my app's layout in Firefox. – Chunky Chunk Aug 07 '20 at 05:08
1

same issue in a display:grid element. Works like a dream on Chrome, scrolls right through my footer in firefox and then doesnt stick on the way up :( – LaZza Dec 21 '20 at 21:47
@LaZza Using display:block for sticky element helped me solve the same problem. – Viktor Brešan Apr 11 '21 at 14:18

score 11 · Accepted Answer · answered Dec 17 '14 at 09:08

11

It sticks if you specify a top value:

.sticky{
   position: -webkit-sticky; /* for safari */
   position: sticky;
   width: 200px;
   float: left;
   top: 10px;
}

fiddle

answered Dec 17 '14 at 09:08

nice ass

16,471
7
50
89

6

This doesn't work when you put the sticky thing below something else: https://jsfiddle.net/3qoe0wd0/44/ I'm using Firefox 50.1.0 – Chris Smith Feb 14 '17 at 14:49
@ChrisSmith The html markup is broken in your fiddle. That is likely an issue. The div tag isn't closed on the content class. – ADJenks Jun 15 '17 at 19:53

score 3 · Answer 3 · answered Jun 11 '19 at 11:09

3

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

answered Jun 11 '19 at 11:09

roroland

164
2
9

It will not work with overflow-x: hidden as well. So, any overflow (e.g. overflow, overflow-y, overflow-x) will bug out sticky. – Mykel Oct 19 '20 at 02:53

score 1 · Answer 4 · answered Jan 14 '19 at 05:58

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>

Related answers and solutions

score 1 · Answer 5 · answered Jul 20 '20 at 15:06

1

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.

answered Jul 20 '20 at 15:06

Cynicus Rex

27
3

score 0 · Answer 6 · answered Apr 22 '19 at 02:03

0

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...

answered Apr 22 '19 at 02:03

user316264

19

score 0 · Answer 7 · answered Apr 15 '20 at 08:33

0

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

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

answered Apr 15 '20 at 08:33

Akashxolotl

428
5
6

score 0 · Answer 8 · answered Dec 01 '20 at 17:28

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.

score 0 · Answer 9 · answered May 19 '21 at 06:38

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;

score 0 · Answer 10 · answered Sep 22 '21 at 18:39

0

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.

answered Sep 22 '21 at 18:39

Weam Adel

151
1
11

score 0 · Answer 11 · answered Nov 03 '22 at 23:37

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;
}

position: sticky not working in firefox

11 Answers11

Linked