iOS 14 safari animation-timing-function bug

Good evening, today I got a bug on using animation-timing-function in safari after updated to iOS 14.

Before iOS 14, animation-timing-function is used to control the speed of the properties (likes top, left, opacity). But now it seems to control the timing. Below is the example :

.div{ animation: my-ani 10s ease-out; }
@keyframes my-ani {
0%, 30% { left:0px }
100% { left:100px }
}

In the past (and browsers except safari in iOS 14), the animation start at 3s and moving to 100px with speed of ease-out in 7 seconds. But in safari 14, it will start before 3s (I don't know the exact time) with linear speed in more than 7 seconds. Do anyone know what is the reason on this issue? Thanks.

Hi there,

I am also experiencing the same issue - but with opacity and position.

Any ideas as to why this bug now occurs in iOS14, but not 13?
Exactly same here.

If I connect to my iOS 14 Safari via macOS's Safari (developer tools), and watch the target element, devtools shows the desired rectangle but iOS Safari can't render it correctly. Super weird.
Hello yuenyuen666 and thanks for reporting this issue.

This was actually already reported as WebKit bug 215807 and fixed as WebKit revision 266241. Sadly, the issue was found too late in the iOS 14 development cycle for the fix to be made in time for the iOS 14 release. However, the iOS 14.2 release has the fix for this issue and you can check for yourself with an iOS 14.2 beta.

In the future, please consider filing such issues directly on the WebKit bug tracker so that engineers like myself see your report immediately.
iOS 14 safari animation-timing-function bug
 
 
Q