Bug 229403

Summary: WKWebView: Major delays for composited value animations
Product: WebKit Reporter: Matt Perry <mattgperry>
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Normal CC: dino, graouts, graouts, mattgperry, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Other   
Hardware: iPhone / iPad   
OS: iOS 14   
Attachments:
Description Flags
iPhone running 14.7.1 with long delay. Same every refresh
none
Different iPhone with short delay, same every refresh none

Description Matt Perry 2021-08-23 03:25:41 PDT
Open either of these links in iOS Safari, and again in iOS Chrome:

WAAPI: https://8ozd3.csb.app/
CSS `animation`: https://4bg8j.csb.app/

In Safari, the animation plays immediately on page load, as expected.

In Chrome, only the non-composited value plays immediately (`background`). `transform` and `opacity` don't animate until several seconds after page load, and even then the animation is completely out of sync with `background`.

Interestingly, the `fill: backwards` does apply both values before they start animating, out of ignorance this suggests to me that they're operating on entirely different timelines or are given different `startTime` (although logging suggests the latter isn't the case).
Comment 2 Matt Perry 2021-08-23 05:40:27 PDT
Created attachment 436186 [details]
iPhone running 14.7.1 with long delay. Same every refresh
Comment 3 Matt Perry 2021-08-23 05:41:45 PDT
Created attachment 436187 [details]
Different iPhone with short delay, same every refresh
Comment 4 Matt Perry 2021-08-23 05:42:52 PDT
I tried the same link on my wife's iPhone and my iPhone and there are two different delay durations, but they remain the same after repeated refreshes. I've attached videos.
Comment 5 Matt Perry 2021-08-23 08:50:46 PDT
Further experimentation:

On my iPhone, the composited animations take almost exactly 14 seconds to start. It isn't bound to `duration`; if `duration` is 2s then it'll start after 7 iterations, 15s partially into the second iteration.

The `animate` call can be wrapped in a timeout of this duration, when triggered it will take another 14s for the composited animations to start. So this doesn't seem bound to the global timeline.

Manually pausing the animation and driving it by setting `currentTime` in a `requestAnimationFrame` loop will fix the animation: 
https://fexji.csb.app/
Source: https://codesandbox.io/s/waapi-webkit-iteration-timing-bug-forked-fexji?file=/src/index.js:459-644
Comment 6 Matt Perry 2021-08-24 03:53:32 PDT
Setting playbackRate to 1.000001 also fixes the animation.
Comment 7 Matt Perry 2021-08-25 09:02:07 PDT
From looking into other related bugs it looks like playbackRate !== 1 is booting the animation off CA which makes sense as it also fixes Webkit's synchronisation issues.
Comment 8 Radar WebKit Bug Importer 2021-08-30 03:26:20 PDT
<rdar://problem/82517366>
Comment 9 Antoine Quint 2021-09-07 07:08:50 PDT
I'm on iOS 15 and haven't checked with iOS 14.7.1 yet, but I'm not seeing differences between Safari and Chrome here, nor do I between Safari and the simple WKWebView test app "WebView" (https://apps.apple.com/fr/app/webview-wkwebview-and-uiwebview-rendering/id928647773?l=en).

Have you had a chance to try an iOS 15 beta to see if the issue persists? I would be curious to know also if you can reproduce the issue with the various modes (UIWebView, WKWebView, SafariViewController) in the "WebView" app, even on iOS 14.7.1.
Comment 10 Matt Perry 2021-09-07 07:18:45 PDT
(In reply to Antoine Quint from comment #9)
> I'm on iOS 15 and haven't checked with iOS 14.7.1 yet, but I'm not seeing
> differences between Safari and Chrome here, nor do I between Safari and the
> simple WKWebView test app "WebView"
> (https://apps.apple.com/fr/app/webview-wkwebview-and-uiwebview-rendering/
> id928647773?l=en).
> 
> Have you had a chance to try an iOS 15 beta to see if the issue persists? I
> would be curious to know also if you can reproduce the issue with the
> various modes (UIWebView, WKWebView, SafariViewController) in the "WebView"
> app, even on iOS 14.7.1.

I haven't had the chance but that sounds promising, perhaps a fix has filtered through. I wouldn't know where to start with the other Webkit APIs to be honest. But will look into upgrading to 15 beta.
Comment 11 Matt Perry 2021-09-07 13:02:29 PDT
(In reply to Antoine Quint from comment #9)

> Have you had a chance to try an iOS 15 beta to see if the issue persists?

Yeah this does seem to be fixed in 15
Comment 12 Antoine Quint 2021-09-08 07:08:43 PDT
(In reply to Matt Perry from comment #11)
> (In reply to Antoine Quint from comment #9)
> 
> > Have you had a chance to try an iOS 15 beta to see if the issue persists?
> 
> Yeah this does seem to be fixed in 15

Are you confirming that on iOS 15 you are seeing the same correct behavior in both Safari and Chrome?

If so, please change this bug's status to Resolved / Configuration Changed.
Comment 13 Antoine Quint 2021-09-08 07:21:02 PDT
Mistakenly marked as resolved, but waiting on the orignal bug reporter to confirm this.
Comment 14 Antoine Quint 2021-09-23 10:00:50 PDT
Reopening until we hear back from the orignal bug reporter.
Comment 15 Matt Perry 2022-01-31 09:24:46 PST
Can confirm fixed in Chrome in iOS 15, thanks