Bug 285277 – [view-transitions] The keyframes for effects on ::view-transition-group() pseudos are wrong

• Status: NEW
• Component: New Bugs

[Bramus]

In https://codepen.io/bramus/pen/NPKgvMY?editors=0010 I get the effect set on ::view-transition-group(box) pseudo. Once retrieved, I get and log the keyframes. As you can see the value for `transform` in the to keyframe is set to the same value as the from keyframe.

```js
[
    {
        "offset": 0,
        "easing": "ease",
        "composite": "auto",
        "transform": "matrix(1, 0, 0, 1, 24, 371.5)",
        "height": "143px",
        "backdropFilter": "none",
        "width": "143px",
        "computedOffset": 0
    },
    {
        "offset": 1,
        "easing": "ease",
        "composite": "replace",
        "transform": "matrix(1, 0, 0, 1, 24, 371.5)", // 👈 This line
        "height": "auto",
        "backdropFilter": "none",
        "width": "auto",
        "computedOffset": 1
    }
]
```

This does not represent reality and becomes problematic when trying to manipulate the keyframes. See https://codepen.io/bramus/pen/dPbzZra in where I first get the keyframes and then re-set them with only the `transform`: the box does not move at all because of its `transform` not changing.

```js
const boxKeyframes = boxGroupAnimation.effect.getKeyframes();
    
const newKeyframes = [
   { transform: boxKeyframes[0].transform },
   { transform: boxKeyframes[1].transform },
];

boxGroupAnimation.effect.setKeyframes(newKeyframes);
```

[Bramus]

FWIW: Blink has a similar bug but it sets the to keyframe’s `transform` to `"none"` – https://issues.chromium.org/issues/387030974

[Bramus]

Correction: In WebKit, it is the value for `boxKeyframes[0].transform` that is wrong (not the value of `boxKeyframes[1].transform` as I had reported in #c0)

By manually correcting the transform, as done in https://codepen.io/bramus/pen/OPLxrQN, all works fine:

```js
const rectBefore = document.querySelector('.box').getBoundingClientRect(); // 👈 This line

const t = document.startViewTransition(() => {
    setRandomAlignments();
});

await t.ready;

… (get effect on the pseudo and get its keyframes)

newKeyframes[0].transform = `matrix(1, 0, 0, 1, ${rectBefore.left}, ${rectBefore.top})`; // 👈 This line
boxGroupAnimation.effect.setKeyframes(newKeyframes);
```

[Bramus]

Digging deeper: It’s the entire `from` keyframe that is wrong. See https://codepen.io/bramus/pen/ogvobYQ?editors=0010 in which I change the size of the element as well. The `from` keyframe also shows the `to` keyframe’s `width` and `height` which is incorrect.