Warum unterbricht „translate3d' von WebKit das CSS-„z-index'-Stacking?

WebKit Transform Translate3D stört den CSS-Z-Index

Bei absoluter Positionierung unterliegen überlappende Elemente der Z-Index-Stapelung, wodurch ihre relative Reihenfolge bestimmt wird auf der Leinwand. Allerdings stört die Verwendung der Translate3d-Webkit-Transformation für Animationen dieses Stapelverhalten. Dieses Problem betrifft alle wichtigen mobilen Browser, die Webkit-Übergänge unterstützen.

Verstehen des Problems

Wie in der WebKit-Fehlerdatenbank (https://bugs.webkit.org) berichtet /show_bug.cgi?id=61824) überschreibt die Anwendung einer 3D-Transformation auf der Z-Achse die Z-Indexwerte. Der Grund liegt im Übergang von einer 2D-Rendering-Ebene zu einer 3D-Rendering-Ebene. Innerhalb des 3D-Raums bestimmen Z-Werte die Elementpositionierung und machen den Z-Index irrelevant.

Lösung des Problems

Um diese Störung zu verhindern, muss man zum 2D-Rendering zurückkehren für untergeordnete Elemente durch Anwenden der folgenden CSS-Eigenschaft:

transform-style: flat;

Diese Eigenschaft stellt sicher, dass untergeordnete Elemente in der 2D-Renderingebene bleiben. Beibehaltung ihres Z-Index-Stapelverhaltens auch nach der 3D-Transformation des übergeordneten Elements.

Das obige ist der detaillierte Inhalt vonWarum unterbricht „translate3d' von WebKit das CSS-„z-index'-Stacking?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!