Bug 243864

Summary:

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

Product:

WebKit

Reporter:

Christopher Kirk-Nielsen <chriskirknielsen+wkbugs>

Component:

Animations

Assignee:

Martin Robinson <mrobinson>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

ahmad.saleem792, alex, bfulgham, chriskirknielsen+wkbugs, dino, graouts, graouts, ntim, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar, Regression

Version:

Safari Technology Preview

Hardware:

Mac (Intel)

OS:

macOS 12

URL:

https://codepen.io/chriskirknielsen/pen/xxWapbW?editors=1100

Attachments:

Description	Flags
Testcase	none

Description Christopher Kirk-Nielsen 2022-08-11 18:47:45 PDT

**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)

Comment 1 Ahmad Saleem 2022-08-12 13:29:45 PDT

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!

Comment 2 Radar WebKit Bug Importer 2022-08-12 13:35:46 PDT

<rdar://problem/98584661>

Comment 3 Christopher Kirk-Nielsen 2022-08-13 15:34:07 PDT

(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!

Comment 4 Antoine Quint 2022-09-12 08:35:01 PDT

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.

Comment 5 Antoine Quint 2022-09-13 00:31:23 PDT

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

Comment 6 Antoine Quint 2022-09-13 00:31:47 PDT

Created attachment 462306 [details]
Testcase

Comment 7 Martin Robinson 2022-10-12 01:33:36 PDT

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

Comment 8 EWS 2022-10-19 01:41:32 PDT

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

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

Comment 9 Antoine Quint 2022-10-24 06:39:48 PDT

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