CSS-Leistung relativ zu translateZ (0)

Eine Reihe von Blogs hat den Leistungsgewinn ausgedrückt, indem die GPU dazu gebracht wurde, zu glauben, dass ein Element 3D ist, indem transform: translateZ(0)Animationen und Übergänge beschleunigt wurden. Ich habe mich gefragt, ob die Verwendung dieser Transformation folgende Auswirkungen hat:

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

CSS-Transformationen erstellen einen neuen Stapelkontext und enthalten einen Block, wie in der Spezifikation beschrieben. Im Klartext bedeutet dies, dass Elemente mit fester Position, auf die eine Transformation angewendet wird, eher wie absolut positionierte Elemente wirken und z-indexWerte wahrscheinlich verschraubt werden.

Wenn Sie sich diese Demo ansehen , werden Sie sehen, was ich meine. Auf das zweite Div wird eine Transformation angewendet, was bedeutet, dass ein neuer Stapelkontext erstellt wird und die Pseudoelemente oben und nicht unten gestapelt werden.

Also mach das im Grunde nicht. Wenden Sie eine 3D-Transformation nur an, wenn Sie die Optimierung benötigen. -webkit-font-smoothing: antialiased;ist eine weitere Möglichkeit, die 3D-Beschleunigung zu nutzen, ohne diese Probleme zu verursachen. Sie funktioniert jedoch nur in Safari.

Wenn Sie Auswirkungen haben möchten, ist die Leistung von Google Chrome in einigen Szenarien bei aktivierter Hardwarebeschleunigung schrecklich . Seltsamerweise hat es gut -webkit-transform: rotateZ(360deg);funktioniert , den "Trick" so zu ändern, dass er gut funktioniert.

Ich glaube nicht, dass wir jemals herausgefunden haben, warum.

Es zwingt den Browser, die Hardwarebeschleunigung zu verwenden, um auf die grafische Verarbeitungseinheit (GPU) des Geräts zuzugreifen und Pixel zum Fliegen zu bringen. Webanwendungen hingegen werden im Kontext des Browsers ausgeführt, sodass die Software den größten Teil (wenn nicht den gesamten) Rendering-Vorgang ausführt, was zu weniger Leistung bei Übergängen führt. Das Web hat jedoch aufgeholt, und die meisten Browser-Anbieter bieten jetzt eine grafische Hardwarebeschleunigung mithilfe bestimmter CSS-Regeln.

Durch -webkit-transform: translate3d(0,0,0);die Verwendung wird die GPU für die CSS-Übergänge aktiviert, wodurch sie flüssiger werden (höhere FPS).

Hinweis: translate3d(0,0,0) Tut nichts in Bezug auf das, was Sie sehen. Es bewegt das Objekt um 0 Pixel in der x-, y- und z-Achse. Es ist nur eine Technik, um die Hardwarebeschleunigung zu erzwingen.

Lesen Sie hier gut: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Ich kann bestätigen, dass sich -webkit-transform: translate3d(0, 0, 0);das mit der neuen position: -webkit-sticky;Immobilie herumschlagen wird . Mit einem Navigationsmuster für die linke Schublade, an dem ich gearbeitet habe, hat die Hardwarebeschleunigung, die ich mit der Transformationseigenschaft wollte, die feste Positionierung meiner oberen Navigationsleiste beeinträchtigt. Ich habe die Transformation ausgeschaltet und die Positionierung hat gut funktioniert.

Zum Glück hatte ich anscheinend schon Hardwarebeschleunigung, weil ich -webkit-font-smoothing: antialiaseddas HTML-Element hatte. Ich habe dieses Verhalten in iOS7 und Android getestet.

Wenn Sie auf Mobilgeräten alles an die GPU senden, wird der Speicher überlastet und die Anwendung stürzt ab. Ich habe dies auf einer iPad-App in Cordova festgestellt. Am besten senden Sie nur die erforderlichen Elemente an die GPU, die Divs, die Sie speziell verschieben.

Besser noch, verwenden Sie die 3D- Übergangstransformationen , um Animationen wie translateX (50px) zu erstellen, im Gegensatz zu left: 50px;