Skip to content

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

Open
@skobes-chromium

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions