Mejore la velocidad de CSS3 en el iPad

Question

iOS en general tiende a apestar con transiciones CSS3, animaciones, transformaciones, etc. ¿Qué IMO son algunas de las mejores características de la tecnología?

Ahora, he escuchado que puede engañar a iOS para que inicialice su aceleración de hardware lanzando algunas transformaciones 3D aleatorias y otras cosas. Así que transformé un div aleatorio y lo puse en la pantalla (ni siquiera lo oculté), y la experiencia todavía resuena ...

¿Hay alguna forma de mejorar el rendimiento de las transiciones, transformaciones, animaciones, etc. de CSS3? en el iOS? ¿O las aplicaciones web están condenadas a ser imitaciones de plástico de aplicaciones nativas?

Editar: Aquí está el código erróneo ...

http://www.abhi.my/sl/html/

sólo tiene que seguir ese enlace, y verás una pequeña demostración que arme ... Las animaciones son suaves y aceptable cuando se ve en un navegador de escritorio, el mismo sitio en el iOS sufre ... Éste fue diseñado para el iPhone 4 ...

dude en pasar por la fuente y punto cosas ...

Answer 1

transforma en 3D están acelerado por hardware en iOS, entonces Lo único que tienes que hacer es usar la sintaxis 3D cada vez que lo hagas, y funciona muy bien, al menos en 3GS y superior.

Pero no está utilizando transformaciones en su ejemplo, está utilizando una transición en la posición, que es completamente diferente, y sí - da como resultado fps frágiles en el móvil.

En su lugar, debe utilizar -webkit-transform: translate3d (-100%, 0,0) (o un análogo adecuado). Puede ver cuánto más suave es esto desde the example in this page.

Answer 2

Definitivamente debe usar -webkit-transform en lugar de -webkit-transition. Dicho esto, para compatibilidad con navegadores cruzados y facilidad de uso, definitivamente iría con un complemento como jQuery Transit que te permite crear fácilmente transiciones y efectos suaves y naturales en iOS, Android y otros dispositivos móviles.

Example JSFiddle of jQuery Transit in action

Código Ejemplo:

HTML:

<div class="moveMe"> 
    <button class="moveUp">Move Me Up</button> 
    <button class="moveDown">Move Me Down</button> 
    <button class="setUp">Set Me Up</button> 
    <button class="setDown">Set Me Down</button> 
</div> 

Javascript:

$(".moveUp").on("click", function() { 
    $(".moveMe").transition({ y: '-=5' }); 
}); 

$(".moveDown").on("click", function() { 
    $(".moveMe").transition({ y: '+=5' }); 
}); 

$(".setUp").on("click", function() { 
    $(".moveMe").transition({ y: '0px' }); 
}); 

$(".setDown").on("click", function() { 
    $(".moveMe").transition({ y: '200px' }); 
}); 

Alguien más tiene bastante mucho trabajo duro para ti. No soporto juguetear con las animaciones de CSS3 y este plugin hace su trabajo asombrosamente. He probado esto con un iPad, iPod Touch, iPhone y Android. Amo al nativo sentir que da.