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.

28 comments:

Unknown said...

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

schmevie said...

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

Unknown 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.

Unknown said...

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

Unknown said...

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

Unknown said...

Huge thanks! It solved same issue on my side!

Anonymous said...

Thank you! Huge time saver!

Tom said...

I helped. Thanks!

Anonymous said...

Many thanks! Saved a lot of head scratching! :)

Anonymous said...

This is still not working in IE and Firefox. :(

Anonymous said...

Thanks for this, overflow:hidden on a parent was totally my issue.

Witt said...

Also... if the div you set to sticky is wrapped in an anchor tag, that will break the stickiness on Safari too.

Anonymous said...

Saved me! Thanks!

AttiZK said...

I'm so furious about the sticky position.

It's not just that its parent element can't be set to overflow:hidden, but NEITHER of its parents can have the overflow:hidden.

What's even worse is that you can't just overwrite it from hidden to visible, but the whole overflow tag MUST be completely absent, otherwise it also won't work.

JP Mohan said...

Saved me! Thanks!

Seems like we need to make sure all the parent elements are not having the overflow: hidden set.
Correct me if i am wrong.

Unknown said...

Is there a reasonable explanation for this :D ??? Anyway. Thank you VERY much

Martijn said...

Whoa.. 5 years later. This still helped someone.. me (a)

ashish jat said...

thanx bro, you saved me from wasting so many hours in finding the right solution.

Allex Nogue said...

Cara, muito obrigado, esta merda fudeu a minha mente, você me ajudou muito.

Unknown said...

Can't believe this post saved me today!

Anonymous said...

saved a lot of work!..thanks :)

Ramya Priya said...

with overflow-x: hidden also not working

but thanks a lot that

Unknown said...

Thank you for the solution, In my case, it's body overflow property not mentioned.

Anonymous said...

Legend

Anonymous said...

You, sir, are a hero! A huuuuuuuge thanks for sharing the solution.

Anonymous said...

What is the workaround of you do need for example
overflow-x: hidden; /* Disable horizontal scroll */
on your parent element?

Anonymous said...

In my case... also when parents have overflow:auto. Very odd!