2011-10-19 12 views
24

iPad最適化ウェブサイトのスタイルを設定するのにTwitter Bootstrapを使用していて、iOS5のMobile Safariで面白いバグを見つけています。iOS5のモバイルSafariでクリック可能な固定位置navbar

固定位置navbarのアンカーリンクをタップすると、正しくアンカーに移動します。ただし、ページをスクロールするまで、ナビゲーションバーの他のリンクをクリックすることはできません。これを回避する方法についてhttp://twitter.github.com/bootstrap/

任意の提案:

問題は、ブートストラップのサイトは同じ問題を持っているため、ブートストラップ自体にあるように見えますか?


以下のコードで問題が再現されています。 「Test JS」または「Test jQuery」(2種類のスクロール、ストレートJS、またはjQueryベース)をクリックすると、手動でページを移動するまで再度クリックできなくなります。

<!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> 
+1

私は同じ問題を抱えています。これまでの解決策はありません。 – Stuiterbal

+0

私も同様の問題があります。誰でも? – emilolsson

答えて

-2

私は同じ問題を持っていた:

は、ここで基本的なデモコード(.jspファイル)です。 <body>タグ、またはバー(ナビバーまたはトップバー)の直前の要素には、padding-topを少なくとも40pxに適用する必要があります。

33

私はあなたの痛みを感じます。私はこのことを理解するために少なくとも6時間を費やしました。しかし、私は、少なくとも私のために働いた甘い回避策でした。

多くのヘッダーと同じように、ナビゲーション内に固定ヘッダーがあります。 body/htmlはその下を上にスクロールします。

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

HTML ::私のコンテナのdivの終わりに 、ノー高さ/幅

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

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

JS ::ジャストスクロールアニメーションの前に 、私は与えると、空のdivを追加しましたdivの高さは200ピクセルです。

$('#device').css('height', '200px');

はすぐにアニメーションの完全に、私はそれをある離れ

$('#device').css('height', '0px');

高さを取ります。スイートハックマジック。私はそれが助けて欲しい 実際の例が必要な場合は、http://ryanore.com 現在、私は進行中ですので、通常はリンクはありませんが、良い理由があります。

+1

数字「200px」は任意であり、私の状況ではうまくいくように見えました。あなたは、うまくいくものがうまくいくまで価値を念頭に置く必要があるかもしれません。 –

+0

FWIW、これは私のためには機能しませんでした。そのような厄介なバグ! – weotch

+0

私のために働きました。ありがとう! – Mac

2

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

私はこれが最高のものだと言っているわけではありませんが、他の何かを良く見つけることができませんでした。 @ Ryan Oreの解決策をiOS 5.1で彼のウェブサイトを訪問して試してみたが、彼の問題は全く修正されていない。

基本的に、2つの固定されたナビバが作成されています。最初は固定の位置にあり、大きいzインデックス、2番目の絶対位置、より低いzインデックス(もちろん異なるCSSクラス)が作成されています。したがって、オリジナルと複製は、お互いの上に重ねられます。

+0

あなたがこれを実際に投稿してうれしいです、なぜ私がもう私のために働いていないのか分かりません。私は誤って私のコードを駄目にしたかもしれないと思う。私はそれがしばらくの間素晴らしい仕事をしていたことを知っています。報告する。 –

+0

はい、私は実際に私のCSSをして、今再び働いています。なぜあなたのために働いていないのかわかりませんが、別の回避策を見つけられたらうれしいです。私はそれを試していないが、ちょっと、それは素晴らしいthatsを動作する場合。 –

+0

私たちに@ライアン・オレを知らせてくれてありがとう。私は人々があなたのアプローチを研究してやり遂げることができると確信しています。 – Chris

関連する問題