Mobile Safari CSS Position:Fixed bug?

I had this happened. Navigation button that has fixed css position but the hit area doesn’t travel with scroll in iOS Mobile Safari. The person created a test page and also reported the bug to Apple.

Looks like it is a known issue: See 4. Modify code that relies on CSS fixed positioning, found through this discussion thread.

this blog had it documented and has a test page here. in it he suggest

It is possible to prevent this bug simply by making sure that the page loads with content that causes vertical scrolling. For example, you can just put this HTML into your page: <div id="ios5fix" style="position: absolute; left: 0; top: 0; width: 100%; height: 101%;"></div> Wait a few dozen milliseconds after page load, and you can actually delete this div safely.

This guy Ryan claims that he solved it using similar method

html:: At the end of my container div, i added an empty div, with no height/width

<div id="device"></div>

js:: Just before the scroll animation, i give the div height of 200px.

$('#device').css('height', '200px');
immediately on complete of the animation, i take the height away

$('#device').css('height', '0px');

Couldn’t fix it today, but I need to look into it further…

One Response to “Mobile Safari CSS Position:Fixed bug?”

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>