非常に奇妙な動作に遭遇しており、テストしたすべてのブラウザで一貫性がありません。
私はかなり複雑なレイアウトを持っていますが、主な問題はここにあります:
<div id="drop">
<div id="header"></div>
</div>
#drop
持っposition:absolute
てz-index:100
#header
いるposition:fixed; top:60px;
下にスクロールし始めると、Chrome はposition:fixed
ルールを無視します。上記の 2 つのスタイルのいずれかを削除すると、 #drop
Chrome はposition:fixed
ルールを尊重し始めます。
Ubuntu Chrome 23.0.1271.97 では動作せず、Mac Chrome 25.0.1364.99 でも同じ動作が見られます。私の友人は Ubuntu Chrome 25.0.1364.68 ベータ版を使用しており、正しく動作しています。私はFirefoxでそれをテストしましたが、ちょっとうまくいきます(他の症状があります)
誰もこのエラーについて聞いたことがありますか? または誰でもそれを再現できますか?
編集
そのレイヤーposition:fixed
を削除するか、少なくとも変更するとdisplay:none
、この奇妙なバグはなくなります。
編集
このバグが存在する間、ズーム レベルを前後に変更すると、位置が適切な動作に調整されることに気付きました。私には、これは、スクロール時に一部の内部コールバック関数の実行に失敗する webkit の問題を示しています。
もう1つの非常に奇妙なことは、内部にいくつかのリンクが#header
あり、divがそこに表示されなくても、予想される場所をクリックするだけで機能することです。全体的に、壊れているのはレンダリングだけであることに気付きました。ウィンドウのサイズを変更したり、ズームを変更したり、単に Select-All を実行したりして、ブラウザーに再レンダリングを強制すると、ヘッダー バーは適切な位置にジャンプしますが、固定されたままにはなりません。