Bug 243864 – REGRESSION (250920@main): Keyframes don't interpolate for omitted properties in intermediate keyframes

• Component: Animations
• Status: RESOLVED FIXED

[Christopher Kirk-Nielsen]

**Overview:**
When defining CSS animation keyframes with a start and end (0% and 100%) on a defined property (e.g. transform), intermediate keyframes where the start/end property is not defined causes the animation to fail interpolating the value at that intermediate keyframe.

**Steps to Reproduce:**
Reproduce this with an animation on any element with the start/end property being omitted at 50%, affecting another property instead.
Live example on CodePen: https://codepen.io/chriskirknielsen/pen/xxWapbW?editors=1100
Code to reproduce:
```html
<p class="test-element">Text that should be moving</p>
```

```css
.test-element {
	animation: testAnim 1s ease-in-out infinite;
}

@keyframes testAnim {
	0% {
		transform: rotate(-90deg) translateX(1.25em) rotate(90deg);
	}
	50% {
		opacity: 0; /* Commenting this prevents the issue */
	}
	100% {
		transform: rotate(-450deg) translateX(1.25em) rotate(450deg);
	}
}
```

**Actual Results:**
The animation doesn't smoothly animate the `transform` property from 0% to 100%.

**Expected Results:**
The animation runs smoothly and the omitted property is interpolated across keyframes.

**Build Date & Hardware:**
Using Safari Technology preview, Release 151 (Safari 16.0, WebKit 17615.1.1.2)
Running macOS Monterey 12.4 on MacBook Pro (16-inch, 2019)

**Additional Builds and Platforms:**
Doesn't occur on Safari Version 15.5 (17613.2.7.1.8) on macOS
Doesn't occur on Chrome Version 104 on macOS
Doesn't occur on Firefox Version 103 on macOS

(this is my first bug report, I apologise for the formatting)

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6 on macOS 12.5 and behavior between Safari 15.6 and Safari Technical Preview 151 is also different:

-> Safari 15.6 -> round and round movement but not blink like animation
-> Safari TP 151 -> just blink animation but not round and round movement

___

Chrome Canary 106 -> Round and Round movement and blinking
Firefox Nightly 105 -> Round and Round movement and blinking

___

Just wanted to clarify on behavior of STP 151, hence posting the comment. Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/98584661>

[Christopher Kirk-Nielsen]

(In reply to Ahmad Saleem from comment #1)
> I am able to reproduce this bug in Safari 15.6 on macOS 12.5 and behavior
> between Safari 15.6 and Safari Technical Preview 151 is also different:
> 
> -> Safari 15.6 -> round and round movement but not blink like animation
> -> Safari TP 151 -> just blink animation but not round and round movement
> 
> ___
> 
> Chrome Canary 106 -> Round and Round movement and blinking
> Firefox Nightly 105 -> Round and Round movement and blinking
> 
> ___
> 
> Just wanted to clarify on behavior of STP 151, hence posting the comment.
> Thanks!

I was so caught up on the transform I didn't think about the blinking effect but you're right!

[Antoine Quint]

Indeed, Safari was broken in Safari 15.6 and is broken in a different way in the latest Safari Technology Preview. I'm looking at this now.

[Antoine Quint]

This looks like this regressed in https://github.com/WebKit/WebKit/commit/43e80183650b2053fb865f81218eb3c94724f42c, the fix for bug 239906.

[Antoine Quint]

Created attachment 462306 [details]
Testcase

[Martin Robinson]

Pull request: https://github.com/WebKit/WebKit/pull/5283

[EWS]

Committed 255723@main (2fe23935f668): <https://commits.webkit.org/255723@main>

Reviewed commits have been landed. Closing PR #5283 and removing active labels.

[Antoine Quint]

*** Bug 245147 has been marked as a duplicate of this bug. ***