Barba tauscht den Container. Sonst nichts.

Was Barba wirklich macht

Barba wechselt Seiten ohne vollen Reload. Es holt die nächste Seite, nimmt das als Container markierte Element und tauscht es ins aktuelle Dokument. Alles ausserhalb dieses Containers bleibt exakt, wie es war.

Dieser letzte Satz ist das ganze Problem. Ein Script, das einmal beim ersten Load lief, ist schon gelaufen. Ein Element, das ausserhalb des Containers sitzt, kommt nie an. Ein Stylesheet im Head wird nie ersetzt, denn Barba fasst den Head nicht an.

Die vier Fehler, mit Zahlen

Am 6. August 2026 haben wir vier einzelne Fehler auf dieser Site gemessen. Alle vier hatten dieselbe Ursache.

Das Grain-Overlay verschwand

Die Grain-Ebene liegt im Seitencode der Work-Seite als div ausserhalb des Containers. Der Klick von der Startseite zur Work-Seite brachte sie nie ins Dokument. Nach einem Reload war sie da. Sie war das einzige Element, das nach dem Wechsel fehlte, und genau das zeigte auf die Ursache.

Die Hero-Schrift brach aus ihrer Spalte

Die Bio-Seite trägt 3923 Bytes Seiten-CSS im Head. Barba tauscht den Head nie, also fehlte dieses CSS nach einem Klick schlicht. Die Headline mass 269 Pixel statt 196. Die Zeile lief 1379 Pixel breit statt 1004, der Name lief aus dem Rahmen.

Der Hintergrund war nach der Rückkehr tot

Der WebGL-Hintergrund initialisiert sich einmal beim ersten Load. Zurück auf der Startseite standen zwei Elemente mit null Kindern und null Canvases. Die Szenen hingen noch an DOM, das längst gelöscht war.

Die Timeline sprang 2400 Pixel

Unser Seiten-Reset räumte die Seite auf, liess aber den Transform der Eintritts-Animation stehen. Bei Scroll-Position 2400 sass die Station bei y minus 2328 statt bei y 72.

Die Regel, nach der wir jetzt bauen

Was zu einer Seite gehört, gehört in den Container. Was einen Seitenwechsel überleben muss, braucht einen expliziten Synchronisations-Schritt bei jedem Wechsel, in beide Richtungen.

Drei solche Schritte laufen heute. Einer zieht das Seiten-CSS aus dem ankommenden HTML in den Head und entfernt die Blöcke der vorherigen Seite. Einer setzt oder entfernt die Grain-Ebene je nach Attribut am Container. Einer baut die WebGL-Szenen neu.

Was du auf deiner eigenen Site prüfen solltest

Öffne deine Site, klicke auf eine zweite Seite und vergleiche das Dokument mit einem Reload derselben URL. Jedes Element, das nach dem Reload da ist, aber nach dem Klick fehlt, sitzt ausserhalb deines Containers. Diese Liste ist deine Arbeit.