Why doesn't position: sticky work in Chrome?

Question

How do you get position: sticky working?

I tried the following in Chrome 26.0.1410.43 m and it's not working:

thead {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 10px;
}

http://jsfiddle.net/8LRms/

According to this, it should work:

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

It seemed to be supported in Chrome 23.0.1247.0, but now it doesn't work in 26.0.1410.43 m.

Did you go to the demo page on the link you posted? http://html5-demos.appspot.com/static/css/sticky.html When I did, it told me that: Your browser does not support position: sticky!! — Steve, Mar 26 '13 at 20:31
I have no idea if it was or wasn't... I am just pointing out that you have the answer right there, on the page you posted. — Steve, Mar 26 '13 at 20:34
Well, I really don't mean to be a smart ass... but it does explain why it DOESN'T work. It's because your browser doesn't support `position: sticky`. I guess you would have to update your question to ask "Why did my browser support it in the past and no longer does now?" — Steve, Mar 26 '13 at 20:46

TylerH · Answer 1 · 2016-12-23T16:07:22.403

49

For a short time, Chrome enabled this feature behind a flag, --enable-experimental-webkit-features, in their about:flags section. However, it was shortly removed due to inefficiencies in how the browser was repainting.

As of Chrome 56, this feature is enabled without a flag once again.

As of Chrome 52.0.2743.116, this feature is enabled by the flag --enable-experimental-webkit-features once more.

To answer the updated question about why it was removed: Google (Chromium) removed support for position: sticky due to the unfinished nature of the spec, and they will focus on other scrolling features in the mean-time:

"We would eventually like to implement position: sticky, but the current implementation isn't designed in a way that integrates well with the existing scrolling and compositing system. For example, position: sticky relies upon updateLayerPositionsAfterDocumentScroll to function correctly, but that function has no other purpose and can otherwise be removed. Similarly, position: sticky doesn't work at all with composited overflow scrolling, which is now the default mechanism for driving scrolling in the engine.

Once we've got our scrolling and compositing house in order, we should return to position: sticky and implement the feature in a way that integrates well with the rest of the engine. For now, however, this CL removes our current implementation so we can focus on improving our implementation of the scrolling features we've already shipped."

Emphasis mine. You can read more about it here.

edited Dec 23 '16 at 16:07

answered Oct 06 '14 at 18:15

TylerH

20,799
66
75
101

I understood that the reason was that the implementation within the Chrome was poor enough that they scrapped the whole feature. As far as I know, the spec was okay. New implementation for Chrome is in progress: https://www.chromestatus.com/features/6190250464378880 – Mikko Rantalainen Feb 22 '16 at 08:14
@MikkoRantalainen Yes, the spec is fine; multiple other browsers have had it implemented since before Chrome removed it from theirs. They're still working on it within the same "bug" on the tracker as they were when it was removed, though "in progress" is a lose term. – TylerH Feb 22 '16 at 14:53
I understood that "Chromium [...] removed support [...] due to the unfinished nature of the spec" claimed that the spec was unfinished, which did not sound correct to me. – Mikko Rantalainen Feb 23 '16 at 12:08
@MikkoRantalainen That was their wording, sorry. – TylerH Feb 23 '16 at 16:12
Working again in v52 with the enable-experimental-web-platform-features flag enabled: https://bugs.chromium.org/p/chromium/issues/detail?id=231752 – franzo Aug 23 '16 at 08:35
@franzo \o/ hallelujah – TylerH Aug 23 '16 at 14:06

score 35 · Accepted Answer · edited May 01 '17 at 07:16

35

EDIT: You need to launch with --enable-experimental-webkit-features flag enabled via about:flags.

Update: This does not work on Chrome v35 through v51, Chrome 52 reenables this with the experimental web platform features flag. Starting from Chrome 56 position: sticky works out of the box.

edited May 01 '17 at 07:16

Jacob van Lingen

8,989
7
48
78

answered Mar 26 '13 at 20:30

AlienWebguy

76,997
17
122
145

This switch seems to make the demo from the html5rocks.com site work, but still fails on the jsFiddle. – Petah Mar 26 '13 at 20:57
1

It works with your `
` just not with the ``. Either that type of element hasn't been added to the support yet, or it's not going to be possible. Changing the `thead` display to `block` or `inline-block` does nothing as well. Stick to naturally block or inline-block elements and you should be good.
– AlienWebguy Mar 26 '13 at 21:59
20

I hope support for `` and `` becomes first class. Having a scrolling table with sticky headings and or section headings seems like a common use case. – kendsnyder Jun 13 '13 at 18:15
4

Support for sticky positioning on thead elements USED TO work (and worked beautifully). I noticed that it broke after a particular minor/patch release of Chrome 23, which I reported to one of the Chromium devs. Why they yanked support is beyond me, since they had it working flawlessly. – Aquarelle Jul 10 '13 at 21:08
@Aquarelle can you post the link to the ticket so we can harass the Chrome team? :P – arxpoetica Sep 13 '13 at 16:05
9

The flag for this is now "Enable experimental Web Platform features." chrome://flags/#enable-experimental-web-platform-features – Douglas Oct 22 '13 at 14:12
From MDN's position page: "The effect of ‘position: sticky’ on table elements is the same as for ‘position: relative’." – Karl Glaser Mar 03 '14 at 10:27
@Aquarelle it is now implemented in Blink and recognized without the -webkit prefix. Simply "position: sticky" works – TaylorMac May 01 '14 at 19:53
2

@TaylorMac Thanks for the update. However, I tested this again on Chrome v.35 and it didn't work (at least not for thead elements). Also, caniuse.com states that support for this property will not appear in Chrome for the foreseeable future. So, I'm not sure what to say. From what I've read, some folks at Samsung have taken over the implementation of this in Chrome, and they're not ready yet (I get email updates about this specific issue on the Chromium bug tracker, which is how I know). What I don't understand, though, is why support was ripped out when it used to work just fine. – Aquarelle Jul 07 '14 at 07:07
@Aquarelle See my recent answer to detail a bit about why the feature was removed. tl;dr "It wasn't implemented well. Better to start over while it's still early" – TylerH Oct 06 '14 at 18:17
Working again in v52 with the enable-experimental-web-platform-features flag enabled: https://bugs.chromium.org/p/chromium/issues/detail?id=231752 – franzo Aug 23 '16 at 08:35
for some reason `sticky` still isnt working for me, even with chrome 80 :/ – oldboy Feb 05 '20 at 22:54
nm i just realized you need a `top` value for it to work. duhhh – oldboy Feb 05 '20 at 22:56

score 12 · Answer 3 · edited Jan 27 '16 at 18:54

12

FilamentGroup released a nice polyfill for position: sticky. Have a look at: https://github.com/filamentgroup/fixed-sticky

edited Jan 27 '16 at 18:54

pdoherty926

9,895
4
37
68

answered Oct 09 '13 at 08:32

RWAM

6,760
3
32
45

score 10 · Answer 4 · edited Nov 28 '13 at 15:43

10

It seems that it doesn't work on iOS7 Safari if there is a parent node with overflow: hidden property set.

edited Nov 28 '13 at 15:43

orique

1,295
1
27
36

answered Nov 28 '13 at 15:21

user1414673

101
1
2

1

Could you add a reference or other evidence? – class stacker Nov 28 '13 at 15:41
I do confirm that this is a problem on IOS7, load up the iFrame src in mobile safari to test: http://jsfiddle.net/C4uBE/2/ – TaylorMac May 01 '14 at 19:33
2

Great catch - this is the case in both Chrome 54 and Firefox 51 – Neil Oct 18 '16 at 09:12
It doesn't stop working. The position is just being calculated relative to the element with `overflow`, rather that the viewport. – bobo Jan 25 '17 at 14:30

score 3 · Answer 5 · answered Mar 14 '14 at 21:33

3

When Chrome switched over to the Blink rendering engine with version 28, they dropped Webkit, which is the only engine to support this (on Mac and iOS.)

So unless you're using Safari on Mac or iOS, or Chrome on iOS (for now) you will not be able to support this in other browsers.

Sad, it's a great and easy way to float elements.

answered Mar 14 '14 at 21:33

Bice

149
12

Indeed, it was a great way to float elements, specially in tables that you need to keep the `thead` fixed and scroll the `tbody`, I wonder if chrome is gonna bring it back, but for now, we still need to use "dirty solutions" :/ – Kyle Aug 31 '15 at 11:55

hoima · Answer 6 · 2019-09-13T07:36:26.600

It does - now at least Look up https://caniuse.com/#feat=css-sticky

You are targeting the <thead> while Chrome and the Blink engine(Chrome, Edge, Opera) does not support this. Gecko(Mozilla Firefox) and Webkit(Safari) does. Instead try to target the <th> instead as shown below.

Also overflow: hidden on a parent WILL break position:sticky

Be sure to include your vendor prefixes.

Run the snippet and it should show a functional sticky header.

thead > tr > th {
    background: white;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 10px;
}

<h1>Position sticky</h1>
<table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>            
        </tr>    
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

score 1 · Answer 7 · answered Dec 20 '16 at 08:51

1

The great news is that as of Chrome 56 (currently beta as of December 2016, stable in Jan 2017) position: sticky is now back in Chrome.
So, in the near future only Edge would be the only one of all browsers that hasn't implemented it still, except browsers for mobile devices, but I hope they would implement it also soon.

answered Dec 20 '16 at 08:51

Taras Yaremkiv

3,440
7
32
54

1

@Tricksfortheweb Chrome for Android currently supports it too – Taras Yaremkiv Mar 16 '17 at 06:52

Why doesn't position: sticky work in Chrome?

7 Answers7

` just not with the ``. Either that type of element hasn't been added to the support yet, or it's not going to be possible. Changing the `thead` display to `block` or `inline-block` does nothing as well. Stick to naturally block or inline-block elements and you should be good.

Linked