[css-view-transitions-2] [scoped] What is the layout of the ::v-t pseudo in relation to the scope?

[skobes-chromium]

This issue tracks an open question about the behavior of Scoped View Transitions. Further context appears in the document Self-Participating Scopes.

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 (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 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.

cc @noamr @vmpstr @flackr @bramus @jakearchibald