285277 2025-01-01 05:45:23 -0800 [view-transitions] The keyframes for effects on ::view-transition-group() pseudos are wrong 2025-01-08 17:34:41 -0800 1 1 1 Unclassified WebKit New Bugs WebKit Nightly Build Unspecified Unspecified RESOLVED DUPLICATE 282448 InRadar P2 Normal --- 1 bramus webkit-unassigned mattwoodrow ntim webkit-bug-importer oldest_to_newest 2084414 0 bramus 2025-01-01 05:45:23 -0800 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); ``` 2084415 1 bramus 2025-01-01 05:47:56 -0800 FWIW: Blink has a similar bug but it sets the to keyframe’s `transform` to `"none"` – https://issues.chromium.org/issues/387030974 2084433 2 bramus 2025-01-01 11:46:48 -0800 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); ``` 2084581 3 bramus 2025-01-02 15:37:30 -0800 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. 2085771 4 webkit-bug-importer 2025-01-08 05:46:13 -0800 <rdar://problem/142544113> 2085941 5 mattwoodrow 2025-01-08 17:34:30 -0800 Thanks for reporting this! Looks like this got fixed by bug 282448, which should be in STP and Safari 18.3 Beta now. 2085942 6 mattwoodrow 2025-01-08 17:34:41 -0800 *** This bug has been marked as a duplicate of bug 282448 ***