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