Re: [csswg-drafts] [css-view-transitions-1] UA CSS should size ::view-transition to 0x0 (#8278)

## Use-cases

To summarise this, I'd like to start with a few things developers can do with view-transitions:

### Use-case 1: Rootless transitions

Developers apply CSS like this:

```css
:root { view-transition-name: none; }
.component { view-transition-name: component; }
```

Now, when this transition runs, only `.component` will be involved in the transition. However, the developer will be able to see the rest of the document beneath, since only elements involved in the transition are hidden during the transition. This creates a sort-of-but-not-quite scoped transition. "Not quite" since only one can happen at the time.

My gut feeling is this will be very rare, and rarer still when we ship proper scoped transitions.

### Use-case 2: Animating `::view-transition`

Developers may apply an animation to `::view-transition`, expecting it to move everything inside the `::view-transition`.

Demo: https://simple-set-demos.glitch.me/dust-no-raf/ (the rumble effect)

I think this will be more common than the previous use-case.

### Use-case 3: Creating a background to a transition

Developers may create a transition where the root is animated in such a way that it no longer fills the viewport. In cases like this, they may wish to apply a custom backdrop for the rest of the viewport.

Demo: https://simple-set-demos.glitch.me/gross-3d-transition/

I think this will be more common than the previous use-case.

### Use-case 4: Positioning groups relative to the viewport

By default, we position groups automatically from the top-left of the viewport. However, if the developer wants to do something particularly custom, they may choose to do the positioning themselves, and that might not always be an absolute value from the top-left.

https://simple-set-demos.glitch.me/dust-no-raf/ - the dust is positioned `inset: auto 0 0 0`.
https://simple-set-demos.glitch.me/gross-3d-transition/ - uses `::view-transition` as a 'stage' for 3d transforms.
https://simple-set-demos.glitch.me/batman-transition/ - the batman logo is positioned to the center using relative inits like `left: 50%`.

All of these depend on `::view-transition` filling the viewport.

This seems relatively common for fancier transitions.

## Solutions

### Solution 1: No change

`::view-transition` fills the viewport, and captures clicks.

- Use-case 1: Rootless transitions: Clicks to the real DOM are captured by `::view-transition`, appearing as a brief loss of interactivity, which is normal for most view transitions, but unnecessary in this case. The developer would need to apply `pointer-events: none` to the `::view-transition`, and `pointer-events: auto` to transition groups to regain that interactivity during the transition.
- Use-case 2: Animating `::view-transition`: Works as expected.
- Use-case 3: Creating a background to a transition: Works as expected.
- Use-case 4: Positioning groups relative to the viewport: Works as expected.

### Solution 2: `::view-transition` isn't hit-tested

The UA stylesheet would apply `pointer-events: none` to the `::view-transition`, and `pointer-events: auto` to transition groups .

- Use-case 1: Rootless transitions: Works as expected.
- Use-case 2: Animating `::view-transition`: Works as expected.
- Use-case 3: Creating a background to a transition: Works as expected, except in the rare case where the developer does a combination of this _and_ use-case 1, causing an opaque layer where clicks go through it. Although this sounds bad, I'm not sure why a developer would opt into a combination of these use-cases.
- Use-case 4: Positioning groups relative to the viewport: Works as expected.

### Solution 3: `::view-transition` is 0x0, fixed position

- Use-case 1: Rootless transitions: Works as expected.
- Use-case 2: Animating `::view-transition`: Works as expected.
- Use-case 3: Creating a background to a transition: Doesn't work unless the developer applies `inset: 0` to `::view-transition`.
- Use-case 4: Positioning groups relative to the viewport: Doesn't work unless the developer applies `inset: 0` to `::view-transition`.

I initially liked this idea because the developer opts in to `::view-transition` filling the viewport and capturing clicks. However, now I've tried it in practice, I think it makes too many common cases harder. 

Although applying `inset: 0` isn't a lot of effort, I worry we're creating boilerplate for common cases, to cater for uncommon cases.

-- 
GitHub Notification of comment by jakearchibald
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8278#issuecomment-1460153943 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 8 March 2023 13:26:08 UTC