Aceleración por hardware con CSS3

17/may/2012 1

La mayoría de los browsers modernos (Chome 10+, Firefox 4+) usan la tarjeta gráfica para ayudar a las animaciones que son más difíciles de renderizar (WebGL hace uso por defecto de esta memoria, por eso corre tan bien en computadores capaces).

Si estás haciendo animaciones y transformaciones varias utilizando CSS3, existe un truco para engañar al browser y forzar a que utilice el GPU para realizar las animaciones. Basta con que declares la siguiente propiedad y valor (si no la estás utilizando):

-webkit-transform: translateZ(0);

Si ya la estabas utilizando sigue con lo que tenías, que la GPU se encargará de hacer el mejor trabajo posible con tu animación.


Nota: no creas que hace milagros; no hay garantía de que mejore notablemente la performance. Con esto simplemente activarás la memoria gráfica, por ende utilizarás más batería si estás en un móvil/tablet/laptop.

Comentarios

  1. Jonathan [#]

    bueno

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab