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


WJAX 2018 – Von Web APIs über Cloud Native bis hin zu Anregungen zur Produktivitätssteigerung

Autor*in: Regina Staller


Technologie // Über den Tellerrand


Ich durfte dieses Jahr wieder die WJAX im Westin Grand in der Hauptstadt Bayerns besuchen. Neben reichlich Verpflegung gab es auch dieses Jahr wieder viele interessante Vorträge. Ich habe die WJAX am Konferenztag besucht und konnte mir aus diversen Vorträgen viele Anregungen und Ideen mitnehmen. Die Sessions, welche ich gewählt habe, waren thematisch sehr unterschiedlich. …


Beitrag lesen
27
NOV
18

imxTools1 und imxTools2 in einem Portal… erste Schritte sind gegangen

Autor*in: Bastian Schwarz


Technologie


Im Zuge des Schneebayern-Projektes besteht die Anforderung, dass die imxTools1 (für allgemeine imxTools-Inhalte) sowie die imxTools2 (für den Schneehöhenticker) parallel zueinander laufen müssen. Dazu wurde ein neuer Task in der build.xml angelegt, der eigtl genau das gleiche tut wie der register_integration_imxtools, nur dass er das Ziel in einen imxtools2 Ordner anlegt. Auszug aus der build.properties: …


Beitrag lesen
25
NOV
11

Neues vom IE, Spartan Browser und Facebook Video

Autor*in: Benjamin Hofmann


Technologie


Der Spartan-Browser kommt ja so langsam ins Rollen, also gibt’s Neuigkeiten, was das für den IE bedeuten wird: „Gerüchte über das Ende des Internet Explorer sind stark übertrieben“, hält Microsoft zwar dagegen. Tatsächlich erneuerte dieser Post aber nur das Bekenntnis, den Internet Explorer für Firmenkunden am Leben zu erhalten“ Microsoft arbeitet seit einiger Zeit mit …


Beitrag lesen
26
MRZ
15

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