[css-view-transitions-1] UA CSS should size ::view-transition to 0x0

[khushalsagar]

Related to the discussion in #7797.

::view-transition pseudo-element is created for all transitions and sized to the snapshot viewport. This means all user input will resolve to the document element by default (since it will hit this pseudo-element). This doesn't make sense for cases where the root element is not participating in the transition.

UA CSS should add pointer-events: none to this element to prevent it from participating in hit-testing.

Note: This issue is about the default behaviour. Developer CSS can toggle the value of pointer-events.

@jakearchibald

[jakearchibald]

I think this is a reasonable change.

[astearns]

This looks reasonable and should probably get in the spec for wider review.

The CSSWG will automatically accept this resolution one week from now if no objections are raised here. Anyone can add an emoji to this comment to express support. If you do not support this resolution, please add a new comment.

Proposed Resolution : UA CSS should add pointer-events: none to the ::view-transition pseudo-element

[flackr]

I think from a developer perspective it would be better to make the ::view-transition root have 0 size if it has no content participating in the transition. This is the same sort of behavior an element with no content would have. Since it is effectively fixed position it seems like it should have 0 width and height, and unlike fixed automatically positioned at (0, 0) implicitly since it would have no margin from its top layer container.

Developers can easily style it to be full size and this way if developers apply a background it will by default block events which feels like the expected behavior (e.g. if you have a shade over the background). This also reduces the number of styles we need to apply, as we would otherwise have to apply pointer-events: none to the root and pointer-events: auto; to all of the descendants.

[jakearchibald]

This is a more reasonable change. It prevents the case where the developer applies an opaque backdrop, but clicks still go through to the real DOM underneath, because they didn't set point-events: auto.

With this proposal, if the developer successfully creates a backdrop (eg inset: 0; background: black), it will also capture clicks, which is ideal.

[vmpstr]

I agree that this is a better change and I would propose that we accept that.

Revised proposal: Make ::view-transition have 0x0 size. Adjust the root element's view-transition-group size from inset(0) to a calculated size similar to how the size of other view transition elements is calculated.

[khushalsagar]

+1 on the new proposal. It is indeed better than what I proposed since we don't want to ignore ::view-transition from hit testing if it has any content. And now explicit developer CSS would be needed for it to have content.

[khushalsagar]

@astearns I'm re-adding the label for async resolution on the updated proposal. Feel free to add CFC or add this to the in-meeting agenda items if you think that's better.