Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why doesn't position: sticky work in Chrome?

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.

like image 813
Petah Avatar asked Mar 26 '13 20:03

Petah


People also ask

Why position sticky is not working in Chrome?

If any parent/ancestor of the sticky element has any of the following overflow properties set, position: sticky won't work (unless you specify a height on the overflowing container): overflow: hidden. overflow: scroll. overflow: auto.

Why sticky position is not working?

That can happen for many reasons: Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element. Position sticky may not work correctly if any parent element has a set height. Many browsers still do not support sticky positioning.

Why my div is not sticky?

If your element isn't sticking as expected the first thing to check are the rules applied to the container. Specifically, look for any overflow property set on any parents of the element. You can't use: overflow: hidden , overflow: scroll or overflow: auto on the parent of a position: sticky element.

Is position sticky supported?

Position Sticky is supported by all major modern browsers, except for old IE. For Safari browsers you will need to add the -webkit prefix.


1 Answers

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.

like image 132
TylerH Avatar answered Sep 28 '22 00:09

TylerH