WebKit の「translate3d」が CSS の「z-index」スタッキングを破壊するのはなぜですか?

WebKit Transform Translate3D が CSS Z-Index を混乱させる

絶対的に配置された場合、重複する要素は Z-index スタッキングの対象となり、相対的な順序が決定されます。キャンバスの上に。ただし、アニメーションにtranslate3d Webkit変換を使用すると、この積み重ね動作が中断されます。この問題は、WebKit の移行をサポートするすべての主要なモバイル ブラウザに影響します。

問題の理解

WebKit バグ データベース (https://bugs.webkit.org) で報告されています。 /show_bug.cgi?id=61824)、z 軸に 3D 変換を適用すると、z インデックス値がオーバーライドされます。その理由は、2D レンダリング プレーンから 3D レンダリング プレーンへの移行にあります。 3D 空間内では、Z 値によって要素の位置が決定され、Z インデックスは無関係にレンダリングされます。

問題の解決

この中断を防ぐには、2D レンダリングに戻る必要があります。次の CSS プロパティを適用して、子要素を作成します:

transform-style: flat;

このプロパティにより、子要素が確実に保持されます。 2D レンダリング プレーン。親要素の 3D 変換後も、Z インデックスのスタッキング動作が維持されます。

以上がWebKit の「translate3d」が CSS の「z-index」スタッキングを破壊するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。