Considérations sur les performances de transition CSS3

Question

Dans le cadre d'un projet qui doit prendre en charge les périphériques mobiles, j'ai travaillé sur l'imitation du contrôle à bascule de l'iPhone à l'aide de CSS3. J'ai l'aspect et la sensation de l'élément à peu près là, et j'utilise les transitions CSS3 pour animer son changement d'état.

Lorsque j'ai l'élément lui-même sur une page avec rien d'autre, la transition est relativement lisse sur iOS. Cependant, quand je le combine avec d'autres éléments CSS sur une page, le résultat dans iOS est laggy comme quoi que ce soit. C'est légèrement mieux qu'une animation jQuery brute, mais pas beaucoup.

J'ai mis en place deux pages de test pour démontrer ce que je veux dire (la différence est à peine perceptible dans un navigateur régulier):

bascule de contrôle sur sa propre>http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html

Combiné avec d'autres éléments>http://ben-major.co.uk/labs/iPhone%20UI/

Je suis à la recherche de conseils pour accélérer la transition dans les appareils mobiles. Quels pourraient être les facteurs qui ralentissent sa performance sur le test de page complète?

Tous les conseils et commentaires sont les bienvenus.

Answer 1

Vous devez être prudent avec cela, car il peut modifier le z-index de l'élément auquel il est appliqué, mais en ajoutant:

-webkit-transform-style: preserve-3d; 

Pour l'élément que vous appliquez la transition vers, peut accélérer l'animation augmente considérablement, car elle force le matériel à utiliser l'accélération matérielle pour l'animation.

Si vous rencontrez des bugs de mise en page, vous pouvez simplement passer vos transitions 2D à des valeurs 3D, donc:

-webkit-transform: translate(100px, 100px) 

devient:

-webkit-transform: translate3d(100px, 100px, 0px) 

Vous pouvez voir une démonstration de la façon dont cela aide la vitesse les choses, à http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#

Si après l'avoir appliqué à l'élément, vous le voyez ou les éléments qui l'entourent clignotent lors de l'utilisation, puis utilisez:

-webkit-backface-visibility: hidden; 

Pour l'élément, et cela devrait corriger le problème.

Ces astuces m'ont aidé à produire des transitions CSS rapides et efficaces, en espérant qu'elles aident. :)

Answer 2

Chrome a récemment amélioré les performances de transition 2D, et maintenant cette astuce n'est plus nécessaire. La meilleure chose est que si vous supprimez translate3d, vous n'aurez plus ces problèmes d'index z! Utilisez le test pour prouver. http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/

Answer 3

Je pense qu'il est déjà assez vieux, mais pour toute personne qui a encore besoin de trucs pour améliorer les performances de transition sur un appareil mobile, vous pouvez appliquer: -webkit-transform: translateZ (0); à l'élément que vous animez. Cette astuce est selon ce blog: http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/. J'ai essayé et ça marche plutôt bien.

Answer 4

vous pouvez également essayer will-change: transform;, en lire davantage ici: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#Browser_compatibility