25

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>
Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
Joshua Clanton
  • 613
  • 2
  • 8
  • 20

3 Answers3

32

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.

Ryan Ore
  • 1,315
  • 17
  • 23
  • 1
    It should be noted that that number '200px' was arbitrary and seemed to work well in my situation. You may need to fiddle with the value until you fine something that works. – Ryan Ore Apr 11 '12 at 15:35
  • Worked for me, best fix out there. Thanks! – Ross Jun 02 '12 at 18:05
  • Similar approach: I put the workaround div near the bottom of the ``. Immediately after programmatic scrolling, I set the div's height and scheduled returning its height to 0 using a 0 ms setTimeout(). – ʇsәɹoɈ Jun 25 '12 at 21:38
  • So thanks to @Cristian Demetriad I realized my site was a little broken. It was a css issue and is now working again. If this isn't working for you maybe you should try his solution. – Ryan Ore Jul 05 '12 at 18:35
  • I have been trying to figure this out for months, and this is the first actual solution that worked for me on the first try. (Shame on Apple.) Thank you, Ryan! – Alex Moore Aug 31 '12 at 15:11
  • i only used 1px of height and it worked for me. I also combined it with this: http://stackoverflow.com/questions/4096429/can-i-declare-logic-on-jquery-for-the-start-and-end-of-a-scrolling-event. Thanks! – Jason Oct 04 '12 at 19:53
  • ```body.scrolling { padding-bottom: 1px; }``` did the trick for me — thanks a lot! – Andy Feb 04 '13 at 19:26
2

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.

Christopher
  • 592
  • 9
  • 31
  • I'm glad you posted this actually, I'm not sure why mine isn't working any more for me either. I think I may have inadvertently goofed my code. I know it was working great for a while though. will report back. – Ryan Ore Jul 05 '12 at 18:15
  • Yes, I actually goofed my CSS and now is working again. I'm not sure why it's not working for you but I'm glad you found another workaround. I haven't tried it but hey, if it works thats awesome. – Ryan Ore Jul 05 '12 at 18:33
  • Thanks for lettings us know @Ryan Ore. I am pretty sure people can now study your approach and get it done, I will have a look myself as well as I am curious. – Christopher Jul 09 '12 at 08:10
-2

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).

Pabluez
  • 2,653
  • 3
  • 19
  • 29