Thursday, March 20, 2014

When CSS position: sticky doesn’t work.

I spent a huge chunk of time at work yesterday trying to figure out why the hell webkits implementation of position: sticky, position: -webkit-sticky wasn’t working.

Applying it on the tablet site I was working on had no effect but when I viewed a demo site: http://html5-demos.appspot.com/static/css/sticky.html it works perfectly; so it was not a case of my browser not supporting the feature, It was definitely something in the markup or css that was screwing things up.

After some couple of hours hunting about, I found the culprit:

#bodyconstraint {
overflow: hidden !important;
}

A parent element has got overflow:hidden, and this, apparently throws position: -webkit-sticky off.

So in case you run into a situation where position: -webkit-sticky isn’t working, an heads-up: check to see if the element you want to position as sticky is not a child of a parent element that has had its overflow set to hidden.

Also, you need to set the top property of the element you want to position sticky. if not, it doesn't work too.

6 comments:

John Xiao said...

Also should not use `body { height: 100% }`.

schmevie said...

Thank you! I was in a similar situation yesterday, this made my morning!

Jamie Popkin said...

Thanks for this. Saved me some serious time ☺

Corey Meredith said...

Specifically, it seems to be overflow-x that can't be set to hidden. Two other catches that I've found: 1) you must set top to some value and 2) once a sticky element's parent goes out of view, the element will no longer stick.

Дмитрий Сальников said...

Thanks a lot man! This helped me to solve the same problem!

Дмитрий Сальников said...

Thanks a lot man! It helped me to solve the same issue!