Clipping-Probleme (und mehr) bei Ansichtsübergängen mit verschachtelten Ansichtsübergangsgruppen verhindern

Bramus

Vladimir Levin

Veröffentlicht: 22. September 2025

Wenn Sie einen Ansichtsübergang starten, erstellt der Browser automatisch Vorher- und Nachher-Snapshots von Elementen, die mit einem view-transition-name getaggt sind. Diese Snapshots werden in einem Baum von Pseudoelementen gerendert. Standardmäßig ist der generierte Baum „flach“. Das bedeutet, dass die ursprüngliche Hierarchie im DOM verloren geht und alle erfassten Gruppen für Ansichtsübergänge unter einem einzelnen ::view-transition-Pseudoelement gleichgeordnet sind.

Dieser Ansatz mit einer flachen Baumstruktur ist für viele Anwendungsfälle ausreichend, es gibt jedoch einige Styling-Anwendungsfälle, die damit nicht realisiert werden können. Im Folgenden finden Sie Beispiele für Effekte, die in einem flachen Baum unerwartete visuelle Auswirkungen haben können:

Beschneiden (overflow, clip-path, border-radius): Das Beschneiden wirkt sich auf die untergeordneten Elemente des Elements aus. Das bedeutet, dass sich Geschwister der Ansichtsübergangsgruppe nicht gegenseitig beschneiden können.
opacity, mask-image und filter: Diese Effekte sind ebenfalls für ein vollständig gerastertes Bild eines Baums konzipiert und wirken sich auf die untergeordneten Elemente aus, anstatt jedes Element einzeln zu beeinflussen.
3D-Transformationen (transform-style, transform, perspective): Damit das gesamte Spektrum an 3D-Transformationsanimationen angezeigt werden kann, muss eine gewisse Hierarchie beibehalten werden.

Das folgende Beispiel zeigt einen flachen Pseudobaum mit Elementen, die von einem übergeordneten Element im DOM-Baum abgeschnitten werden. Diese Elemente verlieren während des Ansichtsübergangs ihre Beschneidung, was zu einem fehlerhaften visuellen Effekt führt.

Aufzeichnung eines fehlerhaften Clipping-Effekts während eines Ansichtsübergangs. Der Text sollte vom Dialogfeld abgeschnitten werden, wird es aber nicht. Die Animationszeit wird verlangsamt, um den Effekt zu verstärken.

Verschachtelte Ansichtsübergangsgruppen sind eine Erweiterung von Ansichtsübergängen, mit der Sie ::view-transition-group-Pseudoelemente ineinander verschachteln können. Wenn Ansichtsübergangsgruppen verschachtelt sind, können Effekte wie das Zuschneiden während des Übergangs wiederhergestellt werden.

Browser Support

Von einem flachen Pseudobaum zu einem verschachtelten Pseudobaum

In der folgenden Demo können Sie auf den Avatar einer Person klicken, um weitere Informationen zu dieser Person zu sehen. Die Animationen werden durch einen Ansichtsübergang im selben Dokument realisiert, bei dem die angeklickte Schaltfläche in den Dialog übergeht, der Avatar und der Name über den Bildschirm verschoben werden und die Absätze aus dem Dialog nach oben oder unten gleiten.

Live-Demo

Demo-Aufzeichnung

Demoaufzeichnung (verlangsamt)

Wenn Sie sich die Demo genau ansehen, werden Sie feststellen, dass es ein Problem mit dem Übergang gibt: Obwohl die Absätze mit der Beschreibung untergeordnete Elemente des <dialog>-Elements im DOM sind, wird der Text während des Übergangs nicht durch das <dialog>-Feld abgeschnitten:

<dialog id="info_bramus" closedby="any">
  <h2><img alt="…" class="avatar" height="96" width="96" src="avatar_bramus.jpg"> <span>Bramus</span></h2>
  <p>Bramus is …</p>
  <p>…</p>
</dialog>

Auch das Anwenden von overflow: clip auf die <dialog> hat keine Auswirkungen.

Das Problem liegt in der Art und Weise, wie Ansichtsübergänge ihren Pseudobaum erstellen und rendern:

Im Pseudobaum sind standardmäßig alle Snapshots gleichrangig.
Der Pseudobaum wird in einem ::view-transition-Pseudoelement gerendert, das über dem gesamten Dokument gerendert wird.

Für diese Demo sieht der DOM-Baum so aus:

html
  ├─ ::view-transition
  │  ├─ ::view-transition-group(card)
  │  │  └─ ::view-transition-image-pair(card)
  │  │     ├─ ::view-transition-old(card)
  │  │     └─ ::view-transition-new(card)
  │  ├─ ::view-transition-group(name)
  │  │  └─ ::view-transition-image-pair(name)
  │  │     ├─ ::view-transition-old(name)
  │  │     └─ ::view-transition-new(name)
  │  ├─ ::view-transition-group(avatar)
  │  │  └─ ::view-transition-image-pair(avatar)
  │  │     ├─ ::view-transition-old(avatar)
  │  │     └─ ::view-transition-new(avatar)
  │  ├─ ::view-transition-group(paragraph1.text)
  │  │  └─ ::view-transition-image-pair(paragraph1.text)
  │  │     └─ ::view-transition-new(paragraph1.text)
  │  └─ ::view-transition-group(paragraph2.text)
  │     └─ ::view-transition-image-pair(paragraph2.text)
  │        └─ ::view-transition-new(paragraph2.text)
  ├─ head
  └─ body
        └─ …

Da die ::view-transition-group(.text)-Pseudos nachfolgende Geschwister des ::view-transition-group(card)-Pseudos sind, werden sie über der Karte gerendert.

Damit ::view-transition-group(card)-Clips ::view-transition-group(.text) werden können, müssen die ::view-transition-group(.text)-Pseudos untergeordnete Elemente der ::view-transition-group(card) sein. Verwenden Sie dazu view-transition-group, mit dem Sie einem generierten ::view-transition-group()-Pseudoelement eine „übergeordnete Gruppe“ zuweisen können.

Sie haben zwei Möglichkeiten, die übergeordnete Gruppe zu ändern:

Legen Sie für das übergeordnete Element view-transition-group auf contain fest, damit es alle untergeordneten Elemente mit einem view-transition-name enthält.
Legen Sie für alle untergeordneten Elemente view-transition-group auf view-transition-name des übergeordneten Elements fest. Mit nearest können Sie auch die nächstgelegene übergeordnete Gruppe ausrichten.

Um in dieser Demo verschachtelte Gruppen für Ansichtsübergänge zu verwenden, sieht der Code so aus:

button.clicked,
dialog {
  view-transition-group: contain;
}

Oder

button.clicked,
dialog *,
  view-transition-group: nearest;
}

Mit diesem Code werden die ::view-transition-group(.text)-Pseudos nun im ::view-transition-group(card)-Pseudo verschachtelt. Dies geschieht in einem zusätzlichen ::view-transition-group-children(…)-Pseudoelement, in dem alle verschachtelten Pseudoelemente zusammengefasst werden:

html
  ├─ ::view-transition
  │  ├─ ::view-transition-group(card)
  │  │  ├─ ::view-transition-image-pair(card)
  │  │  │  ├─ ::view-transition-old(card)
  │  │  │  └─ ::view-transition-new(card)
  │  │  └─::view-transition-group-children(card)
  │  │    ├─ ::view-transition-group(paragraph1.text)
  │  │    │  └─ ::view-transition-image-pair(paragraph1.text)
  │  │    │     └─ ::view-transition-new(paragraph1.text)
  │  │    └─ ::view-transition-group(paragraph2.text)
  │  │       └─ ::view-transition-image-pair(paragraph2.text)
  │  │          └─ ::view-transition-new(paragraph2.text)
  │  ├─ ::view-transition-group(name)
  │  │  └─ ::view-transition-image-pair(name)
  │  │     ├─ ::view-transition-old(name)
  │  │     └─ ::view-transition-new(name)
  │  └─ ::view-transition-group(avatar)
  │     └─ ::view-transition-image-pair(avatar)
  │        ├─ ::view-transition-old(avatar)
  │        └─ ::view-transition-new(avatar)
  ├─ head
  └─ body
        └─ …

Damit die Absätze mit dem ::view-transition-group(card)-Pseudoelement beschnitten werden, wenden Sie overflow: clip auf das ::view-transition-group-children(card)-Pseudoelement an:

::view-transition-group-children(card) {
  overflow: clip;
}

Das Ergebnis lautet:

Live-Demo

Demo-Aufzeichnung

Demoaufzeichnung (verlangsamt)

Das ::view-transition-group-children-Pseudonym ist nur vorhanden, wenn verschachtelte Gruppen verwendet werden. Es wird an die border-box des ursprünglichen Elements angepasst und erhält einen transparenten Rahmen mit derselben Form und Rahmenstärke wie das Element, das das Pseudoelement generiert hat – card im vorherigen Beispiel.

Clips und mehr

Verschachtelte Gruppen für Ansichtsübergänge werden auch für andere Zwecke als Clipping-Effekte verwendet. Ein weiteres Beispiel sind 3D-Effekte. In der folgenden Demo gibt es eine Option, die Karte während des Übergangs in 3D zu drehen.

html:active-view-transition-type(open) {
    &::view-transition-old(card) {
        animation-name: rotate-out;
    }
    &::view-transition-new(card) {
        animation-name: rotate-in;
    }
}
html:active-view-transition-type(close) {
    &::view-transition-old(card) {
        animation-name: rotate-in;
    }
    &::view-transition-new(card) {
        animation-name: rotate-out;
    }
}

Ohne verschachtelte Gruppen für Ansichtsübergänge werden Avatar und Name nicht mit der Karte gedreht.

Live-Demo

Demo-Aufzeichnung

Demoaufzeichnung (verlangsamt)

Wenn Sie die Pseudoelemente für Avatar und Name in die Karte einfügen, kann der 3D-Effekt wiederhergestellt werden. Das ist aber nicht alles. Zusätzlich zur Rotation der ::view-transition-old(card)- und ::view-transition-new(card)-Pseudos müssen Sie auch das ::view-transition-group-children(card)-Pseudo rotieren.

html:active-view-transition-type(open) {
    &::view-transition-group-children(card) {
        animation: rotate-in var(--duration) ease;
        backface-visibility: hidden;
    }
}
html:active-view-transition-type(close) {
    &::view-transition-group-children(card) {
        animation: rotate-out var(--duration) ease;
        backface-visibility: hidden;
    }
}

Live-Demo

Demo-Aufzeichnung

Demoaufzeichnung (verlangsamt)

Weitere Demos

Im folgenden Beispiel werden verschachtelte Ansichtsübergangsgruppen verwendet, um sicherzustellen, dass die Karten vom übergeordneten Scroller abgeschnitten werden. Mit den enthaltenen Steuerelementen können Sie die Verwendung verschachtelter Ansichtsübergangsgruppen aktivieren oder deaktivieren.

Live-Demo

Demo-Aufzeichnung

Das Interessante an dieser Demo ist, dass alle ::view-transition-group(.card)-Pseudoklassen in der ::view-transition-group(cards)-Pseudoklasse des übergeordneten Elements verschachtelt und von ihr abgeschnitten werden. Die #targeted-card wird ausgeschlossen, weil ihre Ein- und Ausstiegsanimation nicht durch die ::view-transition-group(cards) abgeschnitten werden soll.

/* The .cards wrapper contains all children */
.cards {
  view-transition-name: cards;
  view-transition-group: contain;
}

/* Contents that bleed out get clipped */
&::view-transition-group-children(cards) {
  overflow: clip;
}

/* Each card is given a v-t-name and v-t-class */
.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

/* The targeted card is given a unique name (to style the pseudo differently)
   and shouldn't be contained by the ::view-transition-group-children(cards) pseudo */
#targeted-card {
  view-transition-name: targeted-card;
  view-transition-group: none;
}

Zusammenfassung

Bei verschachtelten Ansichtsübergängen können Sie einen Teil der Topologie des DOM-Baums beibehalten, wenn Sie die Pseudoelemente erstellen. Dadurch werden eine Vielzahl von Effekten ermöglicht, die mit Ansichtsübergängen bisher nicht möglich waren. Einige davon haben wir hier beschrieben.

Durch das Verschachteln ändert sich das Modell für die Erstellung von Ansichtsübergängen. Es ist für die Erstellung komplexer Effekte vorgesehen. Wie bereits erwähnt, lassen sich mit Ansichtsübergängen mit Elementbereich auch einige der Effekte mit einem einfacheren Modell erzielen. Wir empfehlen Ihnen, beide Funktionen auszuprobieren, um herauszufinden, welche am besten zu Ihren Anforderungen passt.

Clipping-Probleme (und mehr) bei Ansichtsübergängen mit verschachtelten Ansichtsübergangsgruppen verhindern Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Von einem flachen Pseudobaum zu einem verschachtelten Pseudobaum

Live-Demo

Demo-Aufzeichnung

Demoaufzeichnung (verlangsamt)

Live-Demo

Demo-Aufzeichnung

Demoaufzeichnung (verlangsamt)

Clips und mehr

Live-Demo

Demo-Aufzeichnung

Demoaufzeichnung (verlangsamt)

Live-Demo

Demo-Aufzeichnung

Demoaufzeichnung (verlangsamt)

Weitere Demos

Live-Demo

Demo-Aufzeichnung

Zusammenfassung

Clipping-Probleme (und mehr) bei Ansichtsübergängen mit verschachtelten Ansichtsübergangsgruppen verhindern