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>

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.

There is a solution here: http://xybrary.appspot.com/.

I am not saying this is the best one but wasn't able to find something else better. Have tried @Ryan Ore's solution by visiting his website on a iOS 5.1 and his issue is not fixed at all.

Basically, two fixed navbars have been created, first one with a fixed positioned and a bigger z-index, the second, absolute positioned and a lower z-index (of course, different CSS class). So the original and the duplicate are layered on top of each other.

I had the same issue. You need to apply a padding-top at least 40px on your <body> tag or any element just before your bar (navbar or topbar).

来源：https://stackoverflow.com/questions/7826868/fixed-position-navbar-only-clickable-once-in-mobile-safari-on-ios5

标签

mobile-safari

ios5

css-position

twitter-bootstrap