[BUG] Déchirure géométrique du clip-path lors de l'animation steps() de la teinte OKLCH

[sebschopf]

lab/animations.css

Line 46 in eeebfa6

/* Chaque span hérite de [data-matrice-char] via l'attribut data-

Contexte

Sur la branche d'expérimentation des ondes chromatiques (animations.css#L46), l'animation saccadée de la teinte sur le mot COMBAT détruit la géométrie des lettres matricielles.

Comportement observé

Lorsqu'on anime --dynamic-h via une fonction steps(15) sur un élément combinant clip-path (sur le pseudo-élément ::after) et filter: drop-shadow (sur le parent) :

• Les coordonnées de la matrice 4x4 sont perdues lors des repaints.
• Les tracés complexes utilisant la technique de la "fente" (Non-Zero Winding, ex: lettres O, A, B) se referment sur eux-mêmes ou explosent.
• L'ombre se détache de la forme réelle.

Cause technique

Le navigateur échoue à synchroniser le recalcul de la couleur oklch() avec la découpe du polygone lors d'un repaint brutal imposé par steps(). L'invalidation de style remonte trop haut dans le DOM.

Solution CSS Pur

1. Typer strictement la variable animée ?
Si --dynamic-h n'est pas typée, le navigateur la traite comme un string et recompile tout. ??
Il faut essayer de l'enregistrer peut-être ? :

@property --dynamic-h {
  syntax: '<number>'; /* ou <angle> selon ton usage */
  inherits: true;
  initial-value: 330; /* var(--h-brand) par défaut */
}

A tester.