Logbuch

CSS Animation / transition verursacht "Cumulative Layout Shift"

War vor kurzem ein wenig verblüfft, da ich nach einem Lighthouse Test einer Seite einen enormen Ausschlag des "Cumulative Layout Shifts" hatte, der mich kurz zur Verzweiflung brachte, da er sich laut aufgeführter Diagnose auf Animationen (eine enorme Liste!!!!) bezog und ich aber gar keine Animationen eingebaut hatte - auf den ersten Blick. So konnte es sich nur irgendwo um eine CSS Animation handeln, die nicht sauber umgesetzt war. Und genau da lag der Haken.

Wenn man Buttons gern z.B. mittels "transition: background-color 0.3s" einen sanfteren Mouse-Over Effekt verpasst, kann es in bestimmten Fällen dazu führen, dass der Button sich in dem Moment verändert, wenn die externe CSS Datei mit den transition-Angaben vollständig geladen ist. Entscheidend für eine Auswirkung ist allerdings nicht die Hintergrundfarbe, sondern eher das padding. Da man aber das padding bei einem Button selten in einer transition-Angabe einsetzt, kommt es nur dann zum tragen, wenn man den transition Effekt auf "all" setzt und das war genau bei mir einmal der Fall, da ich nicht nur die Hintergrundfarbe sondern auch die Schriftfarbe beim Hover ändern wollte und durch den Wert "all" auch aus Versehen das padding einbezog, was eigentlich gar nicht beabsichtigt bzw. gewollt war. Und da dieser Button oben nahe des Kopfbereiches positioniert war, hat sich das Layout-Shift auf einen Großteil des Inhaltes ausgewirkt.

Die kleine Animation soll das noch einmal bildhaft machen. Ausgangspunkt ist ein Standard-Button, der sich in dem Moment verändert, indem die CSS vollständig geladen ist und dadurch folgenden Content nach unten schiebt. Daher mein Tip. niemals: transition: all.

Kommentare

Was ist die Summe aus 7 und 6?
Über neue Kommentare per E-Mail benachrichtigen (Sie können das Abonnement jederzeit beenden)