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


Netbeans 7.1patch1 released

Autor: Bastian Schwarz


Technologie


Gestern wurde Netbeans 7.4patch1 released in dem auch einige PHP Fixes mit drin sind. Näheres gibt es hier: https://netbeans.org/community/news/show/1602.html Das Auto-Namespacing geht leider immer noch nicht … Gruß Bastian


Beitrag lesen
26.
Nov.
2013

YouTube Data-API v2 ist tot.

Autor: Benjamin Hofmann


Technologie


Wer es noch nicht mitbekommen hat, Google stellt die Version 2 seiner Data API für YouTube ein. Die Ankündigung für die Abschaltung der v2-API kam bereits im März 2014. Mehr Informationen gibt es hier: https://www.googlewatchblog.de/2015/04/youtube-data-api-viele/ Einen Migration-Guide von Google gibt es hier: https://developers.google.com/youtube/v3/migration-guide


Beitrag lesen
22.
April
2015

Mass Apache .htaccess redirect generator

Autor: Benjamin Hofmann


Technologie


Vielleicht für den einen ganz nützlich wenn in einem Projekt mal wieder gefühlt hunderttausende Redirects notwendig sind: http://redirectgenerator.netmagnet.cz/. Hiermit ist es sehr einfach statische Redirects zu generieren, also ohne reguläre Ausdrücke in den URLs, die dann an Variablen übergeben werden. Das Tool habe ich schon ein paar mal kurz genutzt und fand es durchaus hilfreich …


Beitrag lesen
18.
Januar
2017

Xdebug Stacktrace verbessern

Autor: Florian Müller


Technologie


Ich habe mich heute im Zuge eines kleinen Problems mit einem Stacktrace etwas mit der xDebug Konfiguration beschäftigt. Dabei bin ich auf eine kleine nützliche Option gestoßen, welche ich euch nicht vorenthalten möchte. Die Optionen xdebug.collect_params Es gibt die Option xdebug.collect_params, welche verschiedene Level an Output ermöglicht. Ich habe mich in meiner VM für den …


Beitrag lesen
03.
August
2017