Bug 215918 - [Web Animations] Using a cubic-bezier() easing with y values above 1 fails
Summary: [Web Animations] Using a cubic-bezier() easing with y values above 1 fails
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL: https://cldup.com/3gYZzqJk0K.html
Keywords: InRadar
Depends on:
Reported: 2020-08-28 04:36 PDT by Antoine Quint
Modified: 2021-05-03 06:35 PDT (History)
5 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Antoine Quint 2020-08-28 04:36:17 PDT
This is a follow-up to bug 215826 which addressed the CSS Transition case, but the JS-originated animation case would require either a Core Animation fix or a different, as-yet unidentified workaround.
Comment 1 Radar WebKit Bug Importer 2020-08-28 04:37:01 PDT
Comment 2 Antoine Quint 2021-05-03 01:59:46 PDT
Cameron McCormack on WebKit Slack mentioned a tweet that sounds like this issue:


It contains a link to an example where we fail:

Comment 3 Antoine Quint 2021-05-03 02:15:08 PDT
I think we could fix this particular test because it uses a single keyframe so we could set the keyframe-specific timing function in CA rather than the animation-wide one, which is the one that doesn't handle cubic() timing function values outside of the [0-1] range. But it wouldn't fix the overall issue with animation-wide timing function with multiple keyframes.
Comment 4 Antoine Quint 2021-05-03 02:17:48 PDT
This particular test can be rewritten to set the easing on the keyframe to get the desired behavior:

    transform: ["none", "translate(50vw)"],
    easing: "cubic-bezier(.2, 1, .2, 1.5)"
  }, {
    duration: 1000,
    fill: "forwards",
Comment 5 Antoine Quint 2021-05-03 06:29:33 PDT
So the particular example mentioned in the tweet did actually regress in r260360. What we should do is disable accelerated animations when there are more than 2 keyframes and an animation-wide timing function with a y value outside of the [0-1] range, and handle the 2-keyframe case by setting the keyframe timing function, provided there is no keyframe-specific easing.
Comment 6 Antoine Quint 2021-05-03 06:29:50 PDT
Then we can track the other cases with a different bug.
Comment 7 Antoine Quint 2021-05-03 06:30:21 PDT
Actually, let's keep this bug for the general problem and create one dedicated to fixing the 2-keyframe case.
Comment 8 Antoine Quint 2021-05-03 06:35:43 PDT
The more specific bug is bug 225301.