Pourquoi mon animation saccade-t-elle sur mobile ?
Diagnostiquez et éliminez les chutes de framerate sur mobile : recalculs de mise en page, repeintes massives, ramasse-miettes et calques GPU.
À retenir
Les saccades d'animation sur mobile proviennent presque toujours de l'animation de propriétés qui déclenchent un recalcul de mise en page (comme width, height, top ou left) ou invalident la peinture (comme box-shadow). Pour atteindre 60 ou 120 FPS stables, animez exclusivement transform (translate3d, scale, rotate) et opacity, et préparez les calques GPU via will-change: transform.
Le cycle de rendu sur processeurs mobiles
Un navigateur produit chaque image en cinq étapes : JavaScript, Style, Mise en page, Peinture et Composition. Si les processeurs de bureau masquent facilement les recalculs continus, les puces mobiles perdent immédiatement des images dès qu'un recalcul de disposition est exigé.
La règle d'or : propriétés de composition uniquement
Seules deux propriétés CSS sont traitées directement par le processeur graphique sans toucher à la mise en page ni à la peinture : transform et opacity. Animer la hauteur pour replier un accordéon force le recalcul de la position de tous les éléments inférieurs à chaque image.
- N'animez jamais width, height, margin, padding, top ou left
- Remplacez les variations de hauteur par transform: scaleY() ou les techniques FLIP
- Isolez les calques GPU avec will-change: transform et retirez la propriété à la fin
- Bannissez les ombres floues lourdes lors des mouvements sur mobile
Le ramasse-miettes et les goulets d'étranglement JavaScript
Les bibliothèques qui allouent de nouveaux objets ou tableaux à chaque image submergent le ramasse-miettes (garbage collector). Dès qu'il se déclenche sur un processeur mobile, l'exécution s'interrompt pendant 20 à 50 ms, créant un saut visible.
Densité de pixels (DevicePixelRatio) sur Canvas
Les écrans mobiles affichent des densités de 2x ou 3x. Rendre des toiles Canvas complexes à pleine résolution sans modération sature la bande passante mémoire et fait chauffer la puce graphique du smartphone.
Principes clés à retenir
- Limitez-vous strictement à transform et opacity pour tout mouvement continu
- Utilisez l'onglet Performance de Chrome DevTools avec un ralentissement CPU x4
- Évitez les allocations d'objets dans requestAnimationFrame pour épargner le GC
- Supprimez l'indice will-change dès la fin de l'animation pour libérer la VRAM
Questions fréquentes
Sources
- Rendering Performance — Google Web Fundamentals
- CSS Triggers (Layout, Paint, Composite) — Paul Irish / Google