Re: [csswg-drafts] [css-view-transitions-2] Ignore offscreen elements from participating in transitions (#8282)

Offline discussion on this today. We have a proposal for how the pseudo-element rendering changes if the old element is offscreen at capture time.

### Morph Animation
This is the case where both old and new elements exist for the same name:
-  The geometry animation on the group pseudo is same as before.
- `::view-transition-old` renders the new live image instead of the old snapshot.
- Instead of setting up cross-fade animations, `::view-transition-old` has a 0->0 opacity animation and `::view-transition-new` has a 1->1 opacity animation. This is mostly to preserve existing behaviour where we use `animation-fill-mode: both` to set the final value for these pseudos.
- `-ua-mix-blend-mode-plus-lighter` is not added to the animation on old/new pseudos since we're not cross-fading them.

A few other options considered were:

- Don't generate the old pseudo at all. This will conflict with author expectations that this situation is limited to entry animations. Authors even use `:only-child` to specify custom entry animations for this mode.
- Generate the old pseudo but don't have any image there. The concern with this is that it might be a larger compat issue if authors have custom animations (like slide out the old and slide in the new). From a perf perspective, since the default UA animations is rendering old at 0 opacity we can also optimize away the rendering.

### Exit animation
This is the case where only the old element exists for a name. A couple of options here:
1. Generate the old pseudo but render no content in it. And switch from a fade out animation to a 0->0 opacity animation.
2. Don't generate any pseudos for this name at all, since we'll basically be doing animations with empty boxes.

Leaning towards 1) because again least compat risk.

---------
The question for how we define an element is offscreen is still open and can be discussed separately.

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


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

Received on Tuesday, 25 June 2024 16:24:45 UTC