Consideraciones para CSS3 Rendimiento Transición

Question

Como parte de un proyecto que debe ser compatible con los dispositivos móviles, he estado trabajando en imitar el iPhone de palanca de control utilizando CSS3. Tengo el aspecto y la sensación del elemento prácticamente allí y estoy usando transiciones de CSS3 para animar su cambio de estado.

Cuando tengo el mismo elemento en una página con otra cosa, la transición es relativamente suave en IOS. Sin embargo, cuando lo combino con otros elementos de CSS en una página, el resultado en iOS es muy lento. Es ligeramente mejor que una animación jQuery en bruto, pero no mucho.

He creado dos páginas de prueba para demostrar lo que quiero decir (la diferencia es apenas perceptible en un navegador normal):

de palanca de control en su propia>http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html

combinación con otros elementos>http://ben-major.co.uk/labs/iPhone%20UI/

Busco algún consejo sobre la aceleración de la transición en los dispositivos móviles. ¿Cuáles podrían ser los factores que están ralentizando su rendimiento en la prueba de página completa?

Cualquier consejo y comentarios son bienvenidos.

Answer 1

Tienes que tener cuidado con esto, ya que puede alterar el índice z del elemento al que se aplica, pero añadiendo:

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

Para el elemento que se va a aplicar la transición a, puede acelerar animación considerablemente, ya que obliga al hardware a utilizar la aceleración de hardware para la animación.

Si encuentra errores en el diseño, sólo puede cambiar sus transiciones 2D a los valores 3d, por lo que:

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

se convierte en:

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

se puede ver una demostración de cómo esto ayuda a la velocidad las cosas arriba, en http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#

Si después de aplicar esto al elemento, lo ve o los elementos a su alrededor parpadean al usar, entonces use:

-webkit-backface-visibility: hidden; 

Para el elemento, y que debe corregir el problema.

Estos consejos me han ayudado a producir transiciones CSS, rápida y eficiente, esperamos que ayudan. :)

Answer 2

Chrome ha mejorado recientemente el rendimiento de transición 2D, y ahora ya no es necesario este truco. Lo mejor es que si eliminas el translate3d ¡ya no tendrás esos problemas del índice Z! Usa la prueba para probar. http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/

Answer 3

Creo que ya es bastante viejo pero para cualquiera que todavía necesite trucos para mejorar el rendimiento de transición en el dispositivo móvil, puede aplicar: -webkit-transform: translateZ (0); al elemento que está animando. Este truco está de acuerdo con este blog: http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/. Lo he intentado y funciona bastante bien.

Answer 4

También puede probar will-change: transform;, leer más sobre esto aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#Browser_compatibility