Aceleración por hardware con CSS3

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.

http://feedads.g.doubleclick.net/~ah/f/cg0uncj5f37ujafq24arp4jasg/468/60#http%3A%2F%2Fwww.csslab.cl%2F2012%2F05%2F17%2Faceleracion-por-hardware-con-css3%2F

from CSSLab http://www.csslab.cl/2012/05/17/aceleracion-por-hardware-con-css3/

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: