iPhone Mobile Safari & CSS position: fixed

by jl2 on October 1st, 2009

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

Share and Enjoy:
  • email
  • Print
  • Twitter
  • del.icio.us
  • Facebook
  • Digg
  • Technorati
  • StumbleUpon
  • Slashdot
  • Ping.fm
  • LinkedIn
  • Google Bookmarks
  • MySpace
  • Netvibes
  • Reddit
  • Tumblr

From CSS, Javascript, UI

6 Comments
  1. But http://www.w3.org/TR/CSS2/visuren.html#choose-position states

    In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and does not move when scrolled

    . This means that the mobile Safari must be nonconformant as a style=”position: fixed” element is moving relative to the viewport’s motion.

  2. Daniel permalink

    My browser too has a viewport, and when its window is smaller than the content within it, it cleverly adds necessary scrollbars (not needed on a touchscreen device) to move this viewport around and this doesn’t mess my fix positioning.

    Someone probably thought it through a bit too much at Apple and wanted to do something clever and it turns out he screwed the fix positioning for every single iphone/ipad users. They must have tested it before releasing it, they really must have noticed that thing, did it look normal to them? Did they really expect us to go and fix all our websites?

    If they say it’s not a CSS bug, then it’s a problem with how their viewport thingy works and they really need to fix it, I’m glad to be an Android user which behaves how you’d expect. They just don’t want to admit it’s a bug and trying to justify it by making it sound like it’s normal isn’t going to help.

  3. problme on android same as iphone

  4. Good morning Sir
    This is Jason from china. we are phone parts wholesaler.
    if you interested, pls contact us.thanks.
    http://www.jacktele.com.cn/
    Best regard
    Jason.

Trackbacks & Pingbacks

  1. Quick jQuery hack to fix position:fixed toolbars in iPhone/iPad/iPod Touch | Lazycoder
  2. » How to test websites on nearly all mobile devices/browsers? armin pfaeffle

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS