Composite Layers

Definition

Couches indépendantes gérées par le GPU pour le compositing. Les éléments promus en couche composite (via transform, opacity, will-change) sont animés sans affecter les autres couches.

Analogie

Comme des calques transparents empilés : on peut bouger un calque sans redessiner les autres.

Exemple de code

/* Promouvoit l'élément en couche composite */
.animated {
  transform: translateZ(0); /* hack de promotion */
  /* Mieux : */
  will-change: transform;
}
/* Vérifier dans DevTools > Layers */

Cas d'usage

Comprendre pourquoi certaines animations sont fluides (compositing) et d'autres saccadent (reflow).

Anti-pattern

Termes lies