WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
243864
REGRESSION (
250920@main
): Keyframes don't interpolate for omitted properties in intermediate keyframes
https://bugs.webkit.org/show_bug.cgi?id=243864
Summary
REGRESSION (250920@main): Keyframes don't interpolate for omitted properties ...
Christopher Kirk-Nielsen
Reported
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)
Attachments
Testcase
(369 bytes, text/html)
2022-09-13 00:31 PDT
,
Antoine Quint
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Ahmad Saleem
Comment 1
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!
Radar WebKit Bug Importer
Comment 2
2022-08-12 13:35:46 PDT
<
rdar://problem/98584661
>
Christopher Kirk-Nielsen
Comment 3
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!
Antoine Quint
Comment 4
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.
Antoine Quint
Comment 5
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
.
Antoine Quint
Comment 6
2022-09-13 00:31:47 PDT
Created
attachment 462306
[details]
Testcase
Martin Robinson
Comment 7
2022-10-12 01:33:36 PDT
Pull request:
https://github.com/WebKit/WebKit/pull/5283
EWS
Comment 8
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.
Antoine Quint
Comment 9
2022-10-24 06:39:48 PDT
***
Bug 245147
has been marked as a duplicate of this bug. ***
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug