215918 2020-08-28 04:36:17 -0700 [Web Animations] Using a cubic-bezier() easing with y values above 1 fails 2021-05-03 06:35:43 -0700 1 1 1 Unclassified WebKit Animations Safari Technology Preview Unspecified Unspecified NEW https://bugs.webkit.org/show_bug.cgi?id=215826 https://bugs.webkit.org/show_bug.cgi?id=225301 https://cldup.com/3gYZzqJk0K.html InRadar P2 Normal --- 1 graouts webkit-unassigned clord dino heycam simon.fraser webkit-bug-importer oldest_to_newest 1683611 0 graouts 2020-08-28 04:36:17 -0700 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. 1683612 1 webkit-bug-importer 2020-08-28 04:37:01 -0700 <rdar://problem/67933480> 1756119 2 graouts 2021-05-03 01:59:46 -0700 Cameron McCormack on WebKit Slack mentioned a tweet that sounds like this issue: https://twitter.com/bdc/status/1389138046545797122 It contains a link to an example where we fail: https://cldup.com/3gYZzqJk0K.html 1756123 3 graouts 2021-05-03 02:15:08 -0700 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. 1756124 4 graouts 2021-05-03 02:17:48 -0700 This particular test can be rewritten to set the easing on the keyframe to get the desired behavior: document.body.firstElementChild.animate({ transform: ["none", "translate(50vw)"], easing: "cubic-bezier(.2, 1, .2, 1.5)" }, { duration: 1000, fill: "forwards", }); 1756151 5 graouts 2021-05-03 06:29:33 -0700 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. 1756152 6 graouts 2021-05-03 06:29:50 -0700 Then we can track the other cases with a different bug. 1756153 7 graouts 2021-05-03 06:30:21 -0700 Actually, let's keep this bug for the general problem and create one dedicated to fixing the 2-keyframe case. 1756159 8 graouts 2021-05-03 06:35:43 -0700 The more specific bug is bug 225301.