Fixed position navbar only clickable once in Mobile Safari on iOS5
I'm using Twitter Bootstrap to style an iPad optimized website and am running up against an interesting bug in Mobile Safari on iOS5.
After tapping on an anchor link in the fixed position navbar, it correctly takes me to that anchor. However, I am then unable to click on any other links in the navbar until after I have scrolled the page.
The problem appears to be in Bootstrap itself, since the Bootstrap site has the same issue: http://twitter.github.com/bootstrap/
Any suggestions for how to work around this?
The code below reproduces the issue. Note if you click on the "Test JS" or "Test jQuery" (two different types of scrolling, straight JS, or jQuery based) you will not be able to click again until after you manually move the page.
Here is the basic demo code(.jsp):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#testDiv {
position: fixed;
bottom: 0;
right: 0;
background: gray;
padding: 20px;
}
#jsDiv,
#jQueryDiv {
width: 200px;
display: block;
height: 40px;
background-color: red;
}
#jQueryDiv {
background-color: yellow;
}
</style>
<script type="text/javascript">
function testScroll() {
alert("JS");
scroll(0, 5000);
}
function testjqScroll() {
alert("JQuery");
$(window).scrollTop(500);
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
</head>
<body>
<%for (int i = 0; i < 500; i++) {%>
Line <%=i%><BR/>
<%}%>
Bottom
<div id=testDiv>
<a id="jsDiv" href="#" onclick="testScroll();return false;">Test JS</a>
<a id="jQueryDiv" href="#" onclick="testjqScroll();return false;">Test jQuery</a>
</div>
</body>
</html>
Answer
I feel your pain. I spent at least 6 hours trying to figure this one out. But I did, at least a sweet workaround that worked for me.
I have a fixed header with navigation in it as many headers have. The body/html scrolls up down underneath it. (typical)
After clicking a nav button, the page scrolls and effectively kills my buttons until I physically scroll my body again with my finger. This somehow makes my buttons clickable again. I tried everything and nobody seemed to have solved it , or didn't share results.
html:: At the end of my container div, i added an empty div, with no height/width
<div id="device"></div>
</div> <!--! end of #container -->
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');
That is it. Sweet hack magic. I hope that helps. If you want a working example, http://ryanore.com Currently I'm in progress so I wouldn't normally drive any links to it, but hey it's for a good cause.