| Summary: | Web Animation, effect easing with 2 keyframes does not yield same result as keyframe easing with 2 keyframes | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Liam DeBeasi <ldebeasi> | ||||||||
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> | ||||||||
| Status: | NEW --- | ||||||||||
| Severity: | Normal | CC: | dino, graouts, graouts, webkit-bug-importer | ||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||
| Version: | Safari 15 | ||||||||||
| Hardware: | Unspecified | ||||||||||
| OS: | Unspecified | ||||||||||
| Attachments: |
|
||||||||||
Hi Liam. Both animations look identical to me in Safari Technology Preview 146 and Safari 15.5 in the macOS 12.5 seed. What Safari version did you reproduce this with? Created attachment 459886 [details]
Comparison video
I reproduced this on iOS Safari 15.6 and macOS 12.4.
I attached a side by side comparison. On the left is the (bad) effect easing, and on the right is the (good) keyframe easing.
A few things to notice:
1. When clicking the buttons to start the animation, the effect easing still shows the square on the first frame, whereas the keyframe easing has the square offscreen. (At time t = 3 seconds).
2. This causes the effect easing to be "behind" the keyframe easing. (At t = 8 seconds)
3. At t = 27 seconds, observe that effects are at the same position in their playback. In the video, I press the right arrow key to proceed to the next frame. Observe that the effect easing square jumps up by multiple pixels and is at the end of its playback. Observe that the keyframe easing moves up by fewer pixels than the effect easing did. When I press the right arrow key again, the effect easing does not move at all, but the keyframe easing does.
Created attachment 459887 [details]
Raw comparison video
I am also attaching the comparison video I used if you would prefer to step through this video instead. It shows side by side playback of the effect and keyframe easing animations.
There appears to be a single frame difference. |
Created attachment 459813 [details] Code reproduction Using an effect easing with 2 keyframes does not yield the same visual result as using a keyframe easing on the same set of keyframes. Steps to reproduce: 1. Open the attached code reproduction on Safari (iOS or macOS). 2. Tap "Effect Easing". Observe that the square jumps up in the final frames of the animation. 3. Tap "Keyframe Easing". Observe that the square does not jump up in the final frames of the animation. Expected Behavior: I expect the effect easing to produce the same smooth result as the keyframe easing. Actual Behavior: The effect easing produces a behavior where the square jumps up in the final frames of the animation. Other Information: - I realize effect easing and keyframe easing are different, but in this scenario it seems like they should produce visually equivalent results. - I cannot reproduce this behavior on Chrome or Firefox.