Anchors losing click ability after scroll on iOS Safari

Question

Using this to pick up clicks:

$("nav li a").click(function(event) {
    event.preventDefault();
    target = $(this).attr("href").replace('#', '');
    goToByScroll(target);
});

And this is the scroll function:

function goToByScroll(id) {
    $('html, body').animate({
        scrollTop: $("#"+id).offset().top - totalHeight 
    }, 'slow');
}

The first click works but after that the links aren't clickable/active unless the page is manually scrolled. Any ideas?

Answer 1

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.