243864 2022-08-11 18:47:45 -0700 REGRESSION (250920@main): Keyframes don't interpolate for omitted properties in intermediate keyframes 2022-10-24 06:39:48 -0700 1 1 1 Unclassified WebKit Animations Safari Technology Preview Mac (Intel) macOS 12 RESOLVED FIXED https://codepen.io/chriskirknielsen/pen/xxWapbW?editors=1100 InRadar, Regression P2 Normal --- 1 chriskirknielsen+wkbugs mrobinson ahmad.saleem792 alex bfulgham chriskirknielsen+wkbugs dino graouts graouts ntim simon.fraser webkit-bug-importer zalan oldest_to_newest 1890784 0 chriskirknielsen+wkbugs 2022-08-11 18:47:45 -0700 **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) 1890982 1 ahmad.saleem792 2022-08-12 13:29:45 -0700 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! 1890983 2 webkit-bug-importer 2022-08-12 13:35:46 -0700 <rdar://problem/98584661> 1891178 3 chriskirknielsen+wkbugs 2022-08-13 15:34:07 -0700 (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! 1897867 4 graouts 2022-09-12 08:35:01 -0700 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. 1898151 5 graouts 2022-09-13 00:31:23 -0700 This looks like this regressed in https://github.com/WebKit/WebKit/commit/43e80183650b2053fb865f81218eb3c94724f42c, the fix for bug 239906. 1898152 6 462306 graouts 2022-09-13 00:31:47 -0700 Created attachment 462306 Testcase 1905026 7 mrobinson 2022-10-12 01:33:36 -0700 Pull request: https://github.com/WebKit/WebKit/pull/5283 1906726 8 ews-feeder 2022-10-19 01:41:32 -0700 Committed 255723@main (2fe23935f668): <https://commits.webkit.org/255723@main> Reviewed commits have been landed. Closing PR #5283 and removing active labels. 1907785 9 graouts 2022-10-24 06:39:48 -0700 *** Bug 245147 has been marked as a duplicate of this bug. *** 462306 2022-09-13 00:31:47 -0700 2022-09-13 00:31:47 -0700 Testcase bug-243864.html text/html 369 graouts PHN0eWxlPgoKI3RhcmdldCB7CiAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICB3aWR0aDogMTAw cHg7CiAgICBoZWlnaHQ6IDEwMHB4OwoJYmFja2dyb3VuZC1jb2xvcjogYmxhY2s7CgoJYW5pbWF0 aW9uOiBhbmltYXRpb24gMXMgbGluZWFyIGluZmluaXRlOwp9CgpAa2V5ZnJhbWVzIGFuaW1hdGlv biB7CgkwJSB7IHRyYW5zZm9ybTogcm90YXRlKC05MGRlZykgdHJhbnNsYXRlWCgxLjI1ZW0pIHJv dGF0ZSg5MGRlZykgfQoJNTAlIHsgb3BhY2l0eTogMCB9CgkxMDAlIHsgdHJhbnNmb3JtOiByb3Rh dGUoLTQ1MGRlZykgdHJhbnNsYXRlWCgxLjI1ZW0pIHJvdGF0ZSg0NTBkZWcpIH0KfQoKPC9zdHls ZT4KPGRpdiBpZD0idGFyZ2V0Ij48L2Rpdj4K