twitter bootstrap fixed-navbarとaffixプラグインで本当に奇妙な "再描画の振る舞い"

Question

Twitter Bootstrapの接尾辞プラグイン、固定ナビゲーションバー、アンカーリンクを一緒に使うと、私は非常に奇妙な動作をしています。私は自分の問題を説明しようとしますが、それは言葉にするのが難しいので、もし私が明瞭でないなら、私を許してください。

私のページの上部にnavbar-fixed-topがあります。その下に私は.container divを持っています。その中には2つのdiv.spans（span4とspan8）があります。 span4の内部には、affix-topクラスが適用されているdiv.wellです（したがって、固定位置になり、その位置に「スティック」します）。私の中でspan8私はたくさんのコンテンツを持っています。

well divの内部には、nav-listがあります。このリストには、span8の項目に基づいて、li/a要素が設定されます（これには小さなスクリプトがあります）。リンクはアンカーであるため、ページ上の要素（#myId、#myIdTwoなど）を指します。すべてこれがすばらしく機能します。私のリストはそこにあり、リンクはクリック可能で、彼らは私の要素に連れて行きます。すばらしいです。

しかし、すばらしいことではありません。ときどきリンクの1つをクリックすると、span8のアンカーに行きますが、ページが正しく更新されないように見えることがあります。私は時々奇妙な白い "箱"を見る。または、スパン内のコンテンツの一部が固定nav-headerの上に表示されます。ときにはnav-listの半分が消えてしまいますが、マウスを動かすと元に戻ります。古いWindowsアプリケーションの中には、うんざりしているものがありました。

ここには、http://jaylach.github.com/lutraが表示されます。問題が発生する前に、ナビゲーションリンクのいくつかを数回クリックする必要があります。

私はこの一日中苦労していました。私の人生のために、私はそれを理解することができません。私は接辞を取り出した、私は固定トップのnavbarを取り出した、私は私のz-indexを取り出した。私はそれを理解できないようです。

これを引き起こしている可能性のあるものは誰でも、どこからでも知ることができますか？私は本当にあなたが与えることができるアドバイスを感謝します。

事前に感謝します！

Answer 1

これはWebKitのバグです。

は両方のスタイルがbootstrap.min.cssで定義されている.navbar-fixed-topと.affix

の両方に-webkit-transform: scale3d(1,1,1);を追加します。だからあなたののmain.cssでこれらの2スタイルのようにオーバーライドします：

.affix,.navbar-fixed-top { 
-webkit-transform: scale3d(1,1,1); 
}