Re: [csswg-drafts] [css-view-transitions-2] [scoped] What is the layout of the ::v-t pseudo in relation to the scope? (#12324)

We (@vmpstr and I) have a new proposal for how the scope’s clip should interact with view transition pseudos.

To recap: as explained in [#issuecomment-3554010585](https://github.com/w3c/csswg-drafts/issues/12324#issuecomment-3554010585), the `::view-transition` pseudo is a `position: absolute` `inset: 0` box-tree child of the scope that [paints on top](https://github.com/w3c/csswg-drafts/issues/12325) of everything else in the scope. This structure, in contrast to earlier designs based on anchor positioning, ensures that an ancestor of the scope will clip the scope and the `::v-t` in the same way — even if that ancestor is not a containing block for abs-pos elements.

The remaining question is: should clips set on the scope itself — such as the scroll clip, if the scope is a scroller — affect transition participants? Our answer: only _some_ participants:

* If the scope is self-participating, the scope’s clip should _not_ apply to the scope’s own snapshots — that is, its `::v-t-old` and `::v-t-new` pseudos — because those images need to capture and draw the scope’s borders and ink overflow (shadows, outlines, etc.).
* However, the scope’s clip _should_ apply to the snapshots of participants other than the scope (regardless of whether the scope is self-participating or not). This stops a participant from weirdly “popping out” of a scroller scope as described in [#issuecomment-3571908163](https://github.com/w3c/csswg-drafts/issues/12324#issuecomment-3571908163).

To achieve both of these goals, we propose the following:

1. The `::v-t` pseudo is magically unaffected by the scope’s clip despite it being a box-tree child of the scope. (This was already part of the [#issuecomment-3530620798](https://github.com/w3c/csswg-drafts/issues/12324#issuecomment-3530620798) resolution.)
2. User-agent style sets `view-transition-group: contain` on the scope during its transition. See [view-transition-group property](https://www.w3.org/TR/css-view-transitions-2/#view-transition-group-prop) and the resolution in [#11926](https://github.com/w3c/csswg-drafts/issues/11926).
3. Extend the semantics of `view-transition-group` so that `contain` generates a `::view-transition-group-children()` pseudo even if the element has `view-transition-name: none` and is therefore not itself a participant in the transition.
4. If the scope’s `overflow` style is not `visible`, then apply `::v-t-group-children(root) { overflow: clip }`. This relies on the proposal in [#12320](https://github.com/w3c/csswg-drafts/issues/12320) for `root` to be the scope’s default `view-transition-name`.)

This proposal ensures that all participants other than the scope will have their snapshots clipped by the `::v-t-group-children(root)` pseudo, which will apply the same clip that the scope itself applies to its descendants.

However, a self-participating scope will have a snapshot that is not subject to that clip, because that snapshot is outside of the `::v-t-group-children(root)` in the DOM.

The developer still has the option to create a scope that is not self-participating, by setting `view-transition-name: none`. Such a scope would generate a `::v-t-group-children` but not a `::v-t-group` or a `::v-t-old` or a `::v-t-new`.

The developer can also, if they want, set `view-transition-group: none` on the scope, to suppress the `::v-t-group-children` and override the default nesting behavior in our proposal.

-- 
GitHub Notification of comment by skobes-chromium
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12324#issuecomment-3613062087 using your GitHub account


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

Received on Thursday, 4 December 2025 16:22:26 UTC