iOS Probleme mit transition

Datum: 28. September 2016
Autor: Florian Müller


Heute ist mir bei einem Projekt ein Problem mit iOS begegnet. Es gibt eine Galerie, bei welcher die Elemente von oben „hereinfliegen“. Auf dem iPad und dem iPhone war dieser Effekt kaum beziehungsweise gar nicht vorhanden, sondern das Bild war einfach *plopp* da. Problem hierbei ist, dass transitions bei iOS ohne Hardware Beschleunigung gerendert werden. Um diese jedoch nutzen zu können, muss man dem Gerät vorspielen, dass hier 3D Inhalte vorkommen. Dadurch aktiviert sich die Hardware Beschleunigung zum Rendern der Animation.

Die CSS Regel, welche bei bei dem Projekt zum Einsatz, sieht wie folgt aus.

  .heroImage > figure{
    display: table; width: 100%;
    margin: 0px; padding: 0px;
    transition: transform 0.25s ease, 
          opacity 0.25s ease, top 0.5s ease;
  }

Fügt man nun noch ein transform: translate3d(0,0,0); hinzu, wird die transition auch auf iOS korrekt ausgeführt. Insgesamt lief die Galerie dadurch flüssiger. Für die Browser-Kompatibilität sollen natürlich die Vendor Prefixes nicht vergessen werden.

In wie fern sich dies auf Android oder am PC auswirkt, kann ich nicht mit Bestimmtheit sagen. Gefühlt ist es auch bei Android flüssiger geworden, dies kann jedoch auch nur der Placeboeffekt gewesen sein.

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Recap Velocity Conference Amsterdam 2016

Autor: Robert Klauser


Technologie // Über den Tellerrand


Nach drei spannenden Tagen von 7. bis 9. November 2016 in Amsterdam bin ich mit vielen neuen und interessanten Eindrücken von der Konferenz zurückgekehrt, die ich gerne mit Euch teilen möchte. Bei der Velocity Conference ging es um die Themen Web Performance in allen Facetten sowie DevOps als Prozess für den agilen und performanten Betrieb …


Beitrag lesen
11.
Nov.
2016

JAX 2015 – Tag 1

Autor: Christian Göbel


Technologie


Dieses Jahr ging’s für mich zum ersten Mal nach Mainz zur JAX – der größten Java-Konferenz in Deutschland. Nach zwei Teilnahmen bei der WJAX in München, der kleinen Schwester der JAX, war ich natürlich gespannt, was in Mainz auf mich zukommen würde. Kontext und Schlüssel-Themen im Überblick Sebastian Meyen, Chefredakteur des Java-Magazins, eröffnete die Konferenz …


Beitrag lesen
24.
April
2015

Netbeans und GIT

Autor: Florian Müller


Technologie


Ich habe mich mal während der Arbeit mit Git mit den Git Hooks beschäftigt. Ziel war es, unnötige Builds in der Pipeline zu vermeiden, welche aufgrund von Lintern fehlschlagen. Dazu wollte ich einen Pre-Commit Hook einsetzen. Ein simpler Hook, welcher vor einem Commit ausgeführt werden sollte: Wenn man über die Command line commiten will, wird diese auch …


Beitrag lesen
21.
April
2017

Langzeittest Serverpilot.io

Autor: Sascha Nützel


Technologie


Nachdem ich privat immer noch einige Server verwalte, wollte ich euch kurz meine seit 1,5 Jahren eingesetzte Verwaltung serverpilot.io kurz vorstellen. Zur Vorgeschichte vor ca. 2 Jahren bemerkte ich mit jedem Update von iMSCP (auch eine Verwaltung um einfach MySQL, FTP Konten, usw. einzurichten), dass immer mehr Ressourcen für diese Aufgabe „verschwendet“ wurden, die Cronjobs …


Beitrag lesen
14.
Nov.
2016