JavaScript to hide browser chrome causes position: fixed bug on iOS

Question

Here is my site: http://smartpeopletalkfast.co.uk/pos/

There is a div #nav which has a fixed position. The site will be mobile optimized so im hiding the browser chrome with the following JavaScript:

setTimeout(function() { 
window.scrollTo(0, 1) }, 
100);

Ive found a bug when viewing the site in an iPhone 3G, iPhone Retina and iPad. If you click on '1' on the front page to take you to the third section, scroll down the page, and then click '< Map' to go to the map section, the nav which now contains the text '< Filters' is in the wrong place. As soon as you scroll up or down the div jumps to the correct place.

Answer 1

Position fixed is not catered for on iOS4/iPhone3GS.... I had the same issue, a fixed header with a back button on it, went wrong with I used scrollTo. The back wouldn't work but a link underneath the header would be clicked My findings below;

Under further investigation with an iOS man, we have discovered it is a bug in Safari on iOS5.

I tried this;

// $('html,body').animate({ scrollTop: scrollto + 'px' }, 'slow')
window.scroll(0,0);

And saw it actually drew the fixed header further down the screen. With the click working.

So I swapped the code back, and although it drew the header correctly at the top, the active click area was still further down the page, though was invisible, was clickable.

Seems they have resolved it testing on iOS6.

I exhausted all kinds of CSS and DOM manipulation, removing, and re-inserting a new header area... nothing works.

So I am 99% sure to post this an THE ANSWER. lol. Though I realise that doesn't help you.