Question

I can’t test my website because I don’t have an iPad, but the guy I’m working for went to an apple store yesterday to try it out and had strange behavior.

So it’s a horizontal scrolling website, and if you click on the navigation it uses jquery to scroll to the element referring to the link. This works fine in all browsers, with no console errors in firefox, chrome, or IE9.

Problem on the iPad though, is that clicking a link the first time works fine – it scrolls just as it should. But after that, clicking links no longer works. He said it would move just a few pixels then stop.

I signed a non-disclosure agreement so I can’t show the website, but here is the code I tied to navigation. Is there anything wrong here? Has anyone experienced this sort of problem on the iPad?

$("#navhome, #logo").bind('click', function(event) {
    // Home button and the page logo send you to the #home element
    event.preventDefault();
    scrollToID($("#home"), this);
});

function scrollToID(id, nav) {
    $("html, body").stop();
    xtarget = id.position().left;
    $("html, body").animate({scrollLeft: xtarget}, 'slow');
}

I mean, this seems like the way to do it. Why would the ipad give any trouble?

I’ll keep browsing google for now, I don’t expect much without being able to link the page. :/

Answer 1

Coming back to this issue, after receiving an email from someone with a similar issue.

The problem I had was that I made the entire website stretch the body of the page, which worked fine with iPad’s touch-controls (like swiping). However, by doing this I needed to move the navigation box either with javascript (jagged) or position: fixed (smooth, but poor mobile support).

Then a bug in iOS5 arose, I’m still not sure on the cause but it’s related to scrolling via jQuery animation and using a moving div with clickable elements during movement.

The navigation would become unclickable until the animation stops, but sometimes it would become unclickable even after the animation, until you interacted with the website by scrolling, zooming, etc. Obviously, this workaround is not user-friendly.

My final solution was to instead wrap the contents in a div that is sized to the width of the browser. As you might know, iPad and similar touch devices do not have native touch support for scrolling a div, just limited scrolling.

There is probably a better solution out there somewhere, but for now, we’re just wrapping it in a div so that our navigation doesn’t have to move at all. Only our content moves, contained within itself.