发表新帖
发表新帖

Fixed position navbar only clickable once in Mobile Safari on iOS5

前端 未结
关注
3 374
悲&欢浪女
悲&欢浪女 2020-12-12 19:48

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 lin

相关标签:
3条回答
  • 孤街浪徒
    2020-12-12 20:10

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

    0 讨论(0)
  • 孤独总比滥情好
    2020-12-12 20:18

    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.

    0 讨论(0)
  • 伪装坚强ぢ
    2020-12-12 20:27

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题