なぜ「translate3d」は、絶対に配置された要素が重なっている場合に Z インデックスの順序を壊すのでしょうか?

Webkit Transform Translate3d による Z インデックスの異常

指定された Z インデックス値を持つ 2 つの絶対位置の div 要素が重複するシナリオでは、アニメーションを画面から外したり画面に戻したりするためのTranslate3d Webkit 変換は、Z インデックスを混乱させる可能性があります。

説明

translate3d を使用すると、要素は 3 次元のレンダリング平面に入り、そこで z-index は無関係になります。変換により要素が Z 軸に沿って移動し、従来の 2D の積み重ね順序が崩れます。

解決策

Z インデックスの順序を復元するには:

1. transform-style: flat; を設定して、子要素の 2D レンダリングに戻ります。これにより、要素は平らな 2D 空間内にあるかのように動作するようになります。

element.css({ 'transform-style': 'flat' });

追加メモ

• 問題は関連している可能性がありますWebkit バグ #61824 へ。
• この解決策は、以下をサポートする iPhone/iPad および Android ブラウザで動作します。 Webkit トランジション。
• translate3d の 3 番目のパラメータを別の値に設定しても、3D 空間でのスタック順序の問題は解決されません。

以上がなぜ「translate3d」は、絶対に配置された要素が重なっている場合に Z インデックスの順序を壊すのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。