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

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

== [css-view-transitions-2] [scoped] What is the layout of the ::v-t pseudo in relation to the scope? ==
This issue tracks an open question about the behavior of [Scoped View Transitions](https://github.com/WICG/view-transitions/blob/main/scoped-transitions.md). Further context appears in the document [Self-Participating Scopes](https://bit.ly/svt-sps).

**Q: What is the layout of the ::v-t pseudo in relation to the scope?**

Because the scope owns the `::view-transition` pseudo-element, it may seem natural for the pseudo to be laid out as an absolute-positioned child of the scope:

```
/* user-agent style */
::view-transition {
  position: absolute;
  inset: 0;
}
```

However, this becomes problematic when the scope is self-participating (#12319), because
* the pseudo is sized to the scope's **padding box**, which doesn't include borders; and
* if the scope is a scroller, the pseudo is placed **inside the scrolling contents**.

You can see this problem in action [here](https://output.jsbin.com/zodacaj/quiet) (use Chrome 139+ with experimental web platform features enabled). The scope is a scroller that is scrolled down. During the transition, the "outside" view of the scroller (i.e. its border box) is captured and render-redirected into the `::view-transition`... which is at the top of the scrolling contents inside the scroll clip.

An alternative might be to layout the pseudo as a sibling of the scope that is effectively [anchor-positioned](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) to the scope:

```
::view-transition {
  position-anchor: --scope;
  left: anchor(left);
  top: anchor(top);
  width: anchor-size(width);
  height: anchor-size(height);
}
```

There is some further discussion on [crbug.com/417988089](https://crbug.com/417988089).

cc @noamr @vmpstr @flackr @bramus @jakearchibald 


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


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

Received on Wednesday, 11 June 2025 19:49:16 UTC