¿Por qué se congela o da tirones mi animación en móvil?
Diagnostica y soluciona caídas de fotogramas y tirones en móvil: recálculos de diseño (reflow), repintados masivos, recolección de basura y capas GPU.
Idea clave
Los tirones en animaciones móviles casi siempre se deben a animar propiedades que obligan a recalcular el diseño (como width, height o top) o que invalidan el pintado (como box-shadow). Para lograr 60 o 120 FPS estables, anima exclusivamente transform (translate3d, scale, rotate) y opacity, y promueve los elementos a su propia capa de la GPU mediante will-change: transform.
El cauce de renderizado en procesadores móviles
Un navegador genera fotogramas en cuatro etapas: JavaScript, Estilo, Diseño, Pintura y Composición. Mientras los procesadores de escritorio disimulan recálculos constantes, los chips móviles sufren caídas drásticas de fotogramas si se fuerza el cálculo de diseño en cada ciclo.
La regla de oro: propiedades solo de composición
Únicamente dos propiedades CSS se procesan íntegramente en la GPU sin tocar el diseño ni la pintura: transform y opacity. Animar la altura para colapsar un acordeón fuerza al navegador a recalcular la posición de cada elemento inferior en cada fotograma.
- Nunca animes width, height, margin, padding, top ni left
- Reemplaza el colapso de altura por transform: scaleY() o técnicas FLIP
- Promueve capas con will-change: transform y retíralo al terminar
- Evita desenfoques pesados o animaciones de sombras complejas en móviles
Recolección de basura y cuellos de botella en JavaScript
Las librerías que crean nuevos objetos o arrays en cada fotograma saturan el recolector de basura. Cuando la recolección se activa en una CPU móvil, la ejecución se pausa durante 20 a 50 ms, causando un tirón visible instantáneo.
Densidad de píxeles (DevicePixelRatio) en lienzos
Las pantallas móviles utilizan densidades de 2x o 3x. Renderizar lienzos Canvas o WebGL complejos a resolución completa sin moderación puede saturar el ancho de banda de la memoria y sobrecalentar la GPU del dispositivo.
Principios clave para recordar
- Limítate estrictamente a transform y opacity en toda animación continua
- Usa la pestaña Performance de Chrome DevTools con CPU 4x más lenta para pruebas
- Evita crear objetos dentro de requestAnimationFrame para no activar el recolector
- Elimina la pista will-change una vez concluido el movimiento para liberar VRAM
Preguntas frecuentes
Fuentes
- Rendering Performance — Google Web Fundamentals
- CSS Triggers (Layout, Paint, Composite) — Paul Irish / Google