iOS Probleme mit transition

Datum: 28. September 2016
Autor*in: 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


Webfonts und der Layout Shift

Autor*in: Axel Güldner


infomax // Technologie // User Experience & Design


„Webfonts sind super“ – erläutert der Webdesigner mittleren Alters. „Bevor wir Webfonts hatten, waren wir mal sowas von eingeschränkt – Arial, Verdana, Georgia – Bums aus die Maus, sehr viel mehr hatten wir nicht.“ führt er weiter aus und klingt dabei wie ein Großvater der vom Krieg erzählt.„Webfonts sind furchtbar“ – erfährt man hingegen vom …


Beitrag lesen
27
OKT
21

Infrastructure as Code: Prolog

Autor*in: Bastian Schwarz


Technologie // Über den Tellerrand


Da unsere Developer VM nun auch schon wieder einige Zeit auf dem Buckel hat habe ich mich die letzten Wochen viel mit dem Thema Virtualisierungsmanagement und Provisioning beschäftigt. Mit was?! Beides klingt hochtrabender als es tatsächlich ist. Letztendlich geht es dabei um 2 Themenbereiche: Das Erstellen von virtuellen Umgebungen Das Einrichten und Konfigurieren dieser Umgebungen Das alles gab …


Beitrag lesen
27
MRZ
17

lory

Autor*in: Benjamin Hofmann


Technologie // User Experience & Design


Und schon wieder habe ich eine kleine schöne Javascript-Library gefunden: lory. Diesmal ist es keine Lightbox-Lösung wie PhotoSwipe gestern, sondern ein simpler Slider. Auch dieses Skript ist auf den mobilen Anwendungsfall ausgelegt und kann von Haus aus mit Swipes umgehen. Auch das sogenannte Infinite-Sliding ist möglich und auch dieses Skript lässt sich über RequireJS nutzen …


Beitrag lesen
23
SEP
16

Caching – Probleme mit Permissions

Autor*in: Florian Müller


Technologie


Ich war gerade an einem Ticket um eine Lösung für das leidige Thema des Caching der Autosuggest zu lösen. Das grundlegende Problem ist, dass das Autosuggest recht umfangreich ist (gecached bis zu 2MB). Sollte nun ein User ein Wort eingeben und kein Autosuggest vorhanden sein, wurde dieser gebaut und gecached. Die hat auch mal gerne eine …


Beitrag lesen
13
JAN
17