web-dev-qa-db-ja.com

iOS5のMobile Safariで一度だけクリックできるnavbarの位置を修正

私はTwitter Bootstrap=を使用してiPadに最適化されたWebサイトをスタイルし、iOS5のMobile Safariの興味深いバグに直面しています。

固定位置のナビゲーションバーのアンカーリンクをタップすると、そのアンカーに正しく移動します。ただし、ページをスクロールするまで、ナビゲーションバーの他のリンクをクリックすることはできません。

問題はBootstrap自体にあるようです。なぜなら、Bootstrapサイトには同じ問題があるためです。 http://Twitter.github.com/ bootstrap /

これを回避する方法についての提案はありますか？

以下のコードは問題を再現します。 [Test JS]または[Test jQuery]（2種類のスクロール、ストレートJS、またはjQueryベース）をクリックすると、ページを手動で移動するまで再度クリックできなくなります。

基本的なデモコード（.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>
mobile-safariios5css-positiontwitter-bootstrap
25
Joshua Clanton

あなたの痛みが分かります。私はこれを理解しようとして少なくとも6時間を費やしました。しかし、私にとっては、少なくとも私にとっては有効な回避策でした。

多くのヘッダーにあるように、ナビゲーションを含む固定ヘッダーがあります。 body/htmlはその下にスクロールダウンします。 （典型的な）

ナビゲーションボタンをクリックすると、ページがスクロールし、指で身体を再び物理的にスクロールするまでボタンを効果的に削除します。これにより、ボタンが再びクリック可能になります。私はすべてを試しましたが、誰もそれを解決していないようでした、または結果を共有しませんでした。

html ::コンテナdivの最後に、高さ/幅のない空のdivを追加しました

   <div id="device"></div>

</div> <!--! end of #container -->

js ::スクロールアニメーションの直前に、divの高さを200pxに設定します。

$（ '＃device'）。css（ 'height'、 '200px'）;

アニメーションが完了するとすぐに、身長を奪います

$（ '＃device'）。css（ 'height'、 '0px'）; 

それだ。甘いハックの魔法。それがお役に立てば幸いです。実例が必要な場合は、 http://ryanore.com 現在進行中ですので、通常はリンクを駆動しませんが、それは正当な理由によるものです。

33
Ryan Ore

ここに解決策があります： http://xybrary.appspot.com/ 。

これが最高だと言っているわけではありませんが、もっと良いものを見つけることができませんでした。 iOS 5.1で彼のWebサイトにアクセスして@Ryan Oreのソリューションを試しましたが、彼の問題はまったく修正されていません。

基本的に、2つの固定navbarsが作成されました。1つ目は固定位置とより大きなz-index、2つ目は絶対位置とより低いz-index（もちろん、異なるCSSクラス）です。したがって、オリジナルと複製は互いの上に重ねられます。

2
Chris