Mir wurde oft gesagt, dass CSS-3D-Transformationen in Mobile Safari hardwarebeschleunigt sind, was mich fragen lässt, ob die Implikation ist, dass 2D-Transformationen nicht sind? Ich kann mir keinen Grund vorstellen, warum sie das nicht wären, da sie im Grunde alle als 3D-Transformationen implementiert werden können, aber ich würde es gerne wissen.
Wenn sich herausstellt, dass 2D-Transformationen nicht hardwarebeschleunigt sind, würde jede Einsicht in die Gründe dafür sehr geschätzt werden.
Sie haben Recht, CSS-2D-Transformationen werden in Mobile Safari nicht hardwarebeschleunigt, aber 3D-Transformationen sind. Ich bin mir nicht sicher, warum es so ist, aber vielleicht haben sie entschieden, dass es für die meisten 2D-Transformationen übertrieben ist. Eine unnötige Verwendung der GPU könnte die Lebensdauer der Batterie beeinträchtigen.
Es ist sehr einfach, eine 2D-Transformation in eine 3D-Transformation umzuwandeln, so dass es kein großes Problem darstellt. Ein Trick besteht darin, translateZ (0) wie hier beschrieben zu verwenden: Ссылка
BEARBEITEN
Apple sagt nichts darüber in ihrer Dokumentation, so dass es schwierig ist, eine autoritative Quelle zu erhalten. Hier ist, was Dean Jackson von Apple dazu sagen musste (aus Ссылка ) ):
Im Grunde wird jede Transformation, die eine 3D-Operation als eine ihrer Funktionen hat, das Compositing der Hardware auslösen, selbst wenn die tatsächliche Transformation 2D ist oder gar nichts (wie translate3d (0,0,0)). Beachten Sie, dass dies nur ein aktuelles Verhalten ist und sich in der Zukunft ändern könnte (weshalb wir es nicht dokumentieren oder fördern). In einigen Situationen ist es jedoch sehr hilfreich und kann die Neuzeichnungsleistung erheblich verbessern.
Ariya Hidayat aus Sencha hat einen Beitrag geschrieben, der die Hardwarebeschleunigung in mobilen Browsern erklärt: Ссылка . Hier ist ein Auszug aus der Post:
Die beste Methode, die CSS-Transformationsmatrix auf translate3d oder scale3d zu setzen (auch wenn kein 3D vorhanden ist), ergibt sich aus der Tatsache, dass diese Matrixtypen das animierte Element so umwandeln, dass es eine eigene Ebene hat Zusammengefügt mit dem Rest der Webseite und anderen Ebenen. Sie sollten jedoch beachten, dass das Erstellen und Zusammensetzen von Layern mit einem Preis verbunden ist, nämlich der Speicherzuweisung. Es ist nicht klug, jedes kleine Element in der Webseite aus Gründen der Hardwarebeschleunigung blind zusammenzusetzen, du wirst Speicher essen.
Hier ist ein Artikel von html5rocks.com, der Hardwarebeschleunigung diskutiert: Ссылка . Hier ist ein Ausschnitt davon:
Derzeit verwenden die meisten Browser die GPU-Beschleunigung nur dann, wenn sie stark darauf hinweisen, dass ein HTML-Element davon profitieren würde. Das stärkste Anzeichen ist, dass eine 3D-Transformation darauf angewendet wurde. Jetzt möchten Sie vielleicht nicht wirklich eine 3D-Transformation anwenden, aber dennoch von der GPU-Beschleunigung profitieren - kein Problem. Wenden Sie einfach die Identitätstransformation an:
-webkit-transform: translateZ (0);
Firefox und Internet Explorer verwenden bereits Hardwarebeschleunigung für 2D-Transformationen, so dass ich nicht überrascht wäre, wenn die WebKit-Browser (Chrome, Safari) es in naher Zukunft aufnehmen würden.
Tags und Links mobile-safari hardware-acceleration css-transforms