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


Browser Diet

Autor: Benjamin Hofmann


Technologie


Eben bin ich über t3n auf eine interessante Website gestoßen: Browser Diet. Hier geht es darum, wie der Name bereits vermuten lässt, wie man Websites im Browser beschleunigen kann. Einiges davon machen wir bereits seit einiger Zeit, einiges nicht. Ein paar Beispiele dafür sind folgende Punkte: http://browserdiet.com/#cache-array-lengths Ein viel gemachter Fehler, auch in PHP, da …


Beitrag lesen
27.
März
2013

AJAX Ladeschnecke ohne Bilder oder zusätzlichem CSS

Autor: Stefan Oswald


Technologie // User Experience & Design


Der Anwendungsfall tritt sehr oft ein: Eine Ergebnisliste soll nachgefiltert werden, und zur Visualisierung, dass gerade etwas im Hintergrund passiert, soll eine „Ladeschnecke“ (oder vielleicht etwas old-school-mäßig ein Fortschrittsbalken) angezeigt werden. Oftmals wird das so umgesetzt, dass man im „beforeLoad“-Ereignis des AJAX-Calls eine animierte Grafik hinzufügt, welche im „complete“-Ereignis wieder entfernt oder unsichtbar gemacht wird. …


Beitrag lesen
23.
Juli
2014

Von Zend_Date und den ersten Tagen im Jahr

Autor: Benjamin Hofmann


Technologie


Ebene bin ich auf eine interessante Sache bei der Verwendung von Zend_Date und dessen Datumskonstanten (Link) gestoßen. Verwendet man die Konstante Zend_Date::YEAR_8601, die sich nach ISO 8601 richtet, wird das Jahr nicht nach der Woche berechnet, in der sich der gegebene Tag befindet. Nun ist es ja bekanntermaßen so, dass sich die letzte Woche eines …


Beitrag lesen
19.
Dez.
2011

Templating with good ol‘ Javascript

Autor: Benjamin Hofmann


Technologie


Die letzten Tage bin ich auf eine interessante Technik gestoßen, mit der man ein sehr simples Templating in Vanilla JS umsetzen kann. Das Ganze orintiert sich an den Techniken, die z.B. Handlebars.js oder die originale Micro-Templating-Technik von John Resig nutzen, ist jedoch deutlich kleiner. Der Code Der komplette Code basiert auf RequireJS, kann aber natürlich …


Beitrag lesen
29.
Sep.
2016