Bug 217317

Summary: REGRESSION (iOS 14): Incorrectly calculated durations on CSS animation keyframes
Product: WebKit Reporter: mathias.wilen
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Major CC: dino, graouts, graouts, webkit-bug-importer
Priority: P2 Keywords: HTML5, InRadar
Version: Safari 14   
Hardware: iPhone / iPad   
OS: Other   
Attachments:
Description Flags
Video showing incorrect animation none

Description mathias.wilen 2020-10-05 08:42:39 PDT 
Created attachment 410521 [details]
Video showing incorrect animation

With the iOS 14 update, CSS @keyframe animations' keyframes are no longer correctly calculated.
Any iOS prior to 14 works fine and any other browser also animates correctly in comparison.

This has been tested with:
iOS 13 - iPhone 11 and iPhone 8
Chrome 85 - PC
Firefox 81 - PC
Chrome 85 Mac OS 10.14 and 10.15

JSFiddle reproducing the issue:
https://jsfiddle.net/1ao07ng5/

The problem is probably easiest to spot at the 95% -> 100% keyframe.
Based on a 10s animation, this should last for 0.5 seconds but it's animating for much longer
Comment 1 Radar WebKit Bug Importer 2020-10-05 17:00:45 PDT 
<rdar://problem/69977262>
Comment 2 Antoine Quint 2020-10-06 23:52:11 PDT 
I'm having trouble finding the exact revision point when this would have improved, but I cannot reproduce this with the most recent iOS 14.2 beta. Matthias, can you check with the most recent beta?
Comment 3 Antoine Quint 2020-10-06 23:56:08 PDT 
I've also reproduced the issue with the iOS 14 GM build, so I'm confident the issue is gone in iOS 14.2.
Comment 4 mathias.wilen 2020-10-07 04:46:56 PDT 
It indeed looks like it is working correctly in iOS 14.2 beta
Comment 5 mathias.wilen 2020-10-07 04:50:20 PDT 
Antoine, do you by chance happen to know the timeline for when iOS 14.2 might be released to the public?
Comment 6 Antoine Quint 2020-10-07 06:14:44 PDT 
Mathias, I cannot comment about future iOS release timing. Thanks for checking that it was indeed fixed for you!