z-index vs translate3D auf Chrome

Question

entschied ich mich zu verwenden:

* { 
    -webkit-transform: translate3d(0px, 0px, 0px); 
} 

, als ich sah, dass es meine Animationen macht viel glatter, wahrscheinlich, weil es die Hardware-Beschleunigung zwingt. Aber ich muss auch einige z-index Tweaks machen, um eine Form vor einen Text zu setzen, zu mask dieser Text an einem Punkt einer Animation. Die Sache ist: Meine (graue) Form muss sich mit einer anderen Form (die grüne im Beispiel unten), die hinter dem Text ist, synchronisieren.

Ich baute eine einfache example, um es visueller zu machen. Es funktioniert gut mit Firefox, aber ich kann es einfach nicht auf Chrome und Safari funktionieren. Nun, es funktioniert, wenn ich das translate3d-Ding entferne, aber da mein aktuelles Projekt viele gleitende und glatte Animationen erfordert, würde die Benutzererfahrung leiden, wenn ich das täte.

Answer 1

Verstanden! Wir können CSS-Clip-Eigenschaft verwenden, um den Text zu maskieren und die rect-Werte basierend auf der Position des anderen Objekts zu aktualisieren. Hier sind einige Informationen w3schools.com/cssref/pr_pos_clip.asp. Dieser Link ist auch sehr aufschlussreich http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties.

Und schließlich hier ist mein Projekt, getan http://iuqo.com. Wenn Sie den Hintergrund ziehen, sehen Sie, dass der Text (vertikal und schön) ausgeschnitten ist. Genau so, wie ich es wollte.

Answer 2

Ohne translate3D ist es möglich, einen Peer-DOM-Knoten (Ihren Text) zwischen einem anderen Peer (Ihrem Handler) und einem seiner Kinder (Ihrer Maske) zu positionieren, aber nur, weil weder Ihr Text noch Ihr Handler explizite Z-Indizes haben . In diesem Fall werden alle nicht z-indizierten Blöcke zuerst gerendert und dann wird die Maske zuletzt gerendert und endet oben (obwohl es ein untergeordnetes Element ist). Macht das Sinn? Nun, so funktionieren Browser.

Wenn Sie jedoch translate3d zu "*" hinzugefügt haben, haben Sie jedem Element einen Stapelkontext hinzugefügt. Was also ohne translate3d "funktioniert", funktioniert jetzt nicht. Übrigens, adding an explicit z-index to each element in your example - ruiniert auch Ihre Maske. Auch hier können Sie keinen Peer-DOM-Knoten zwischen einem anderen Peer und einem seiner untergeordneten Elemente positionieren, da die untergeordneten Elemente den Z-Index des übergeordneten Elements erben, sofern die Positionierung relativ zu einem Onkel/Tante-Knoten erfolgt.

Mein Rat ist, Ihre Sachen zu ernest, so dass alles, was Sie in der Z-Achse relativ zueinander positionieren wollen, ein DOM-Peer ist. Dazu muss die absolute Positionierung jedes Elements manuell berechnet werden, und Sie verlieren den Vorteil der Überlaufbegrenzung, aber hey, it works. Sie können das auch duplizieren, indem Sie 3D-Transformationen mit positiven und negativen Z-Werten durchführen - aber wiederum nur unter Peer-Elementen.

(Kennzeichnung des Z-Index als! Important, rückgängig macht nur die Kaskade und platziert das Element auf der Oberseite der Cascading Stapelreihenfolge. Es ist ein Hack.)