Ein Transform bricht jedes fixed-Element darin

Die Regel des Browsers

Ein Element mit position fixed wird normalerweise am Viewport ausgerichtet. Das stimmt nicht mehr, sobald irgendein Vorfahre einen Transform trägt. Der transformierte Vorfahre wird zum Containing Block. Das fixed-Element richtet sich dann an diesem Vorfahren aus statt am Viewport.

Das ist Standard-Browserverhalten und gut dokumentiert. Trotzdem läuft man leicht hinein, denn nichts davon ist sichtbar.

Wie es sich zeigte

Nach jedem Seitenwechsel hörte unser gepinnter Horizontal-Scroll auf zu pinnen. Ein fliegendes Bild landete am falschen Ort. Beides funktionierte beim frischen Load. Beides brach beim Klick.

Warum die Identity Matrix die Falle ist

Die Animation auf dem Container war längst fertig. GSAP lässt die transform-Eigenschaft auf dem Element stehen, wenn es fertig ist, selbst wenn der Endwert die Identity Matrix ist, die nichts Sichtbares verändert.

Dem Browser ist egal, ob die Matrix etwas tut. Die Anwesenheit der Eigenschaft reicht, um einen Containing Block zu erzeugen. Genau das macht es so schwer zu finden. Nichts sieht transformiert aus. Nichts hat sich bewegt. Das Element trägt trotzdem einen Transform.

Der Fix

Die Eigenschaft entfernen statt ihren Wert zurückzusetzen. Wir räumen jetzt position, top, left, right und transform am Container in unserem Seiten-Reset ab. Den Transform von Hand auf none zu setzen ist nicht dasselbe, denn die Eigenschaft ist dann immer noch da.

Was du auf deiner eigenen Site prüfen solltest

Öffne die Konsole und lies den berechneten Transform jedes Vorfahren von allem, was du gepinnt hast. Gibt einer davon eine Matrix zurück statt none, hast du es gefunden. Prüfe das nach einem Seitenwechsel und nicht beim frischen Load, denn dann erscheint der Rest.