[csswg-drafts] [css-view-transitions-1] Allow UAs to optimize the `::view-transition-group()` keyframes (#11657)

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions-1] Allow UAs to optimize the `::view-transition-group()` keyframes ==
In step 3.9.5 of [Setup transition pseudo-elements](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements-algorithm), UAs a required to generate the following keyframes for every `::view-transition-group()`:

```css
@keyframes -ua-view-transition-group-anim-transitionName {
  from {
    transform: transform;
    width: width;
    height: height;
    backdrop-filter: backdropFilter;
  }
}
```

A problem with this, is that this forces Main Thread animations in all browsers because of the `width`/`height` being present in the keyframes. The spec requires these `width`/`height` properties to always to be set, even when those properties not change throughout the group‘s lifetime.

My suggestion would be to allow UAs to omit the `width` and `height` from these keyframes when those values do not change between the old and new snapshots. This would enable out-of-the-box composited animations on the group.

In https://cdpn.io/pen/debug/dPbzNZg _(source: https://codepen.io/bramus/pen/dPbzNZg)_ I manually build optimized keyframes for the `::view-transition-group()` by not includeing the `width` and `height` (as they do not change in that demo). This has visibly better results, especially when trying out the demo on mobile devices.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11657 using your GitHub account


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

Received on Wednesday, 5 February 2025 11:49:29 UTC