Why doesn't position: sticky work in Chrome?
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.
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.
FilamentGroup released a nice polyfill for position: sticky
. Have a look at: https://github.com/filamentgroup/fixed-sticky