Css – position: fixed doesn’t work on iPad and iPhone

cssiosipadiphonemobile

I have been struggling with fixed positioning in iPad for a while. I know iScroll and it does not always seem to work (even in their demo). I also know that Sencha has a fix for that, but I couldn't Ctrl + F the source code for that fix.

I am hoping that someone may have the solution. The problem is that fixed positioned elements do not get updated when the user pans down/up on an iOS powered mobile Safari.

Best Answer

A lot of mobile browsers deliberately do not support position:fixed; on the grounds that fixed elements could get in the way on a small screen.

The Quirksmode.org site has a very good blog post that explains the problem: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

Also see this page for a compatibility chart showing which mobile browsers support position:fixed;: http://www.quirksmode.org/m/css.html

(but note that the mobile browser world is moving very quickly, so tables like this may not stay up-to-date for long!)

Update: iOS 5 and Android 4 are both reported to have position:fixed support now.

I tested iOS 5 myself in an Apple store today and can confirm that it does work with position fixed. There are issues with zooming in and panning around a fixed element though.

I found this compatibility table far more up to date and useful than the quirksmode one: http://caniuse.com/#search=fixed

It has up to date info on Android, Opera (mini and mobile) & iOS.