[csswg-drafts] [css-view-transitions-2] [scoped] auto-nesting for self-participating scroller scopes (#13420)

skobes-chromium has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions-2] [scoped] auto-nesting for self-participating scroller scopes ==
This is a split-off from #12324 to track the proposal for the browser to automatically [nest](https://github.com/WICG/view-transitions/blob/main/nested-explainer.md) the `::view-transition-group` for any non-root participant inside the `::view-transition-group` for the root (scope) participant, in the case of a [self-participating scope](https://github.com/WICG/view-transitions/blob/main/scoped-transitions.md#self-participating-scopes) that clips or scrolls its [overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow).

In general, if element A clips element B and both are tagged to participate in a view transition, B will "pop out" of A during the transition. See [demo](https://output.jsbin.com/sajukuj/quiet) using `document.startViewTransition`. To avoid this, the developer can write:

```
#A { view-transition-group: contain; }
::view-transition-group-children(A) { overflow: clip }
```

Self-participating scroller scopes are a special case of scoped view transition where this is likely to be a footgun. If the developer forgets to set up the nesting in this manner, the participants inside the scroller will pop out of the scroller.

To make things easier, we can add some rules to the user-agent stylesheet such as:

1. "The scope always has `view-transition-group: contain`." If the scope is self-participating, this would make it a [containing group](https://github.com/WICG/view-transitions/blob/main/nested-explainer.md#special-group-names). If the developer has opted out of self-participation, for example to preserve [interactivity](https://github.com/WICG/view-transitions/blob/main/scoped-transitions.md#interactivity), this would have no effect.
2. "If the scope clips overflow, its `::view-transition-group-children` has `overflow: clip`." This will cause nested groups to be clipped to the bounds of the scope's group.

Prior discussions considered some ideas to address the "pop-out" problem in the case where the scope is **not** self-participating, which proved to be controversial. Therefore, the proposal here has a narrower scope: to auto-nest only in the self-participation scenario. In other words, if the developer opts out of self-participation, we would not set up automatic nesting or do any magical clipping.

I have filed [crbug.com/475255718](https://crbug.com/475255718) to prototype auto-nesting in Chromium.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13420 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 30 January 2026 18:23:31 UTC