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
But http://www.w3.org/TR/CSS2/visuren.html#choose-position states
. This means that the mobile Safari must be nonconformant as a style=”position: fixed” element is moving relative to the viewport’s motion.
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.
problme on android same as iphone
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.