Why doesn't position: sticky work in Chrome? - css

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.

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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>

Answer 7

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.