Skip to content

[css-view-transitions-2] Ignore offscreen elements from participating in transitions #8282

Closed
@khushalsagar

Description

@khushalsagar

Currently if an element has a non-none computed value for view-transition-name, it participates in the transition irrespective of whether it is in the visible viewport. This means the element will be rendered, which has significant computational and memory overhead, even if it is never seen by the user. If the developer wants to avoid this overhead, they have to keep track of the visibility of each element and only add view-transition-name to the onscreen ones.

The proposal to make this case easier is as follows:

  • Add a new CSS property view-transition-offscreen which customizes the behavior for named elements based on their position in the snapshot viewport.
  • The property has 2 values: auto and absent. auto indicates that the UA should render the element irrespective of its viewport position (as-if its onscreen). Would be nice to allow flexibility to the UA to optimize out such elements in case the transition is on memory constrained devices. That's why "should" instead of "must".
  • absent indicates that if the element's ink overflow rectangle does not intersect the snapshot viewport, the element does not participate in the transition (as-if its view-transition-name's computed value was none).
  • The computation for the element's viewport position for the decision above can be done here for old elements. And here for new elements. The subtlety is that for new elements we do it before resolving the ready promise so script can observe the final pseudo DOM structure.

See prior discussion on this here.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Thursday afternoon

    Status

    unsorted FTF

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions