iPhone Mobile Safari & CSS position: fixed

When developing a web app for the iPhone it’s conceivable that you may want some UI elements to appear fixed. An example of this might be a header or toolbar.

With modern desktop browsers this type of scenario can easily be solved with the CSS property:

position: fixed

This unfortunately does not work as expected on the iPhone. Instead of staying fixed, as the user scrolls up and down the page so does the element.

Why does this happen?

Technically the CSS property is being obeyed even though the appearance is unexpected. To understand what is happening you need to remember that what you’re seeing on the iPhone is actually a viewport into the full HTML page.

This is explained well by Richard Herrera on his blog @ Doctyper:

Imagine a book in front of you. Take a piece of paper, cut a 320×416 square in it, and lay it over the book. To read the book, move the paper around and position the hole over the words you want to see. This is exactly what Mobile Safari’s viewport is doing. When you flick and scroll, you’re moving the viewport around while the website behind it stays static.

So the CSS property is valid and working its just that because the viewport is moving rather than the page, the element appears to move.

How do you work around this?

The neatest solution I found to the above issue was to use CSS Animations to fake a scrollable DIV with a fixed height. You can find code and working examples over at cubiq.org