4

これはおそらく、私が何年にもわたってウェブサイトのコーディングを行ってきた中で最も奇妙なことです。そのため、なぜこれが起こっているのかを説明するために、私よりもはるかに頭の良い何人かによって実行されると思いました. 説明がない場合は、バグレポートとして提出するつもりです。問題の原因を実際に突き止めるのに永遠にかかりました。

次の動作は、Firefox (現在、バージョン 15、およびその他のバージョン) でのみ生成できます。Internet Explorer、Chrome、Safari では問題ありません。説明するのが非常に難しいので、ここでデモを作成しました: http://sandbox.uatu.net/dom-changes.php

一般的な考え方は、非常に特定の条件下で、スクロール可能なボックスがスクロールされたときに、スクロールがユーザーによって行われたか、スクリプトによって自動化されたかにかかわらず、DOM の変更が Firefox によって停止されるというものです。セットアップは次のとおりです。

<div id="superContainer">
   <div id="subContainer">
       <div id="mainPage">
           scrollable box in here
       </div>
   </div>
</div>

重要な属性:

  • superContainer には高さと幅の寸法があります

  • サブコンテナには高さ寸法があります

  • subContainer の不透明度設定が 1 未満です

  • サブコンテナには背景色があります

  • mainPage には絶対位置属性があります

とにかく、そのデモ ページにアクセスするとわかることは、ボックスをスクロールしようとすると、すべてのページ アニメーションがフリーズするということです。これらの要素のいくつかを Firebug で実際に見て、プロパティがリアルタイムで変化していることを確認できますが、Firefox はページ上の何も再描画することを拒否しているだけです。

これらの属性のいずれかをオフの位置に切り替えれば、すべて問題ありません。問題を引き起こすように見えるのは、この特定の設定の組み合わせだけです。

その理由について考えている人はいますか？これが私をどれほど夢中にさせたかはわかりません.私は基本的に週末を通してトラブルシューティングを行い、それを発見したサイトでコードを完全にリファクタリングしていました.

4

1 に答える 1

1

ここでは、不透明度 + 絶対位置が原因​​であると思われます。透明度に関する w3 仕様を読んで、エンジンがどのようにレンダリングし、不透明度を脅かすかを理解してください。

http://www.w3.org/TR/css3-color/#transparency

不透明度が 1 未満の要素は単一のオフスクリーン画像から合成されるため、要素の外側にあるコンテンツは、要素の内側にあるコンテンツ間で z オーダーでレイヤー化できません。同じ理由で、実装は不透明度が 1 未満の要素に対して新しいスタッキング コンテキストを作成する必要があります。 'z-index: 0' および 'opacity: 1' で配置された要素である場合に使用されるスタック順序。不透明度が 1 未満の要素が配置されている場合、 [CSS21]で説明されているように 'z-index' プロパティが適用されます。ただし、新しいスタッキング コンテキストが常に作成されるため、'auto' は '0' として扱われます。セクション9.9およびスタック コンテキストの詳細については、 [CSS21]の付録 Eを参照してください。SVG には独自のレンダリング モデル( [SVG11]、第 3 章) があるため、この段落の規則は SVG 要素には適用されません。

#mainPage から position: absolute を削除すると、バグがなくなったことに気付くでしょう。とにかくバグを報告して、実装のプラン B を考えてみてください。

于 2012-10-08T22:51:58.873 に答える