Skip to content

[css-view-transitions-2] [scoped] Should the scope have contain:v-t by default? #12321

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: Should the scope have contain:v-t by default?

A goal of scoped view transitions is to enable composability: inner and outer components can both use transitions without being aware of each other.

<div id="outer-scope">
  <div id="outer-participant" style="view-transition-name: foo">
    <div id="inner-scope">
      <div id="inner-participant" style="view-transition-name: foo">
      </div>
    </div>
  </div>
</div>

But this means we should have a way to stop the outer transition from seeing the tags that "belong" to the inner transition.

Chromium has prototyped contain: view-transition for this:

<div id="outer-scope">
  <div id="outer-participant" style="view-transition-name: foo">
    <div id="inner-scope" style="contain: view-transition">
      <div id="inner-participant" style="view-transition-name: foo">
      </div>
    </div>
  </div>
</div>

It should probably be a recommended best practice for developers to set contain: view-transition on all elements that will be scopes.

If the developer does not set contain: view-transition on a scope, the browser could do it automatically during the transition. This would not prevent inner tags from being picked up by an outer transition when the inner transition is not running.

If scopes are self-participating by default (#12319), then they should probably also be contain: view-transition by default, so that an outer transition does not try to use an inner transition's scope as a participant in the outer transition.

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