Bug 228333 – [iOS] CSS transform transitions become janky after snapshotting other UIViews

• Component: Animations
• Status: RESOLVED FIXED

[Ali Juma]

Snapshotting UIViews with a forced screen update (i.e., calling -[UIView snapshotAfterScreenUpdates:YES]) sufficiently many times somehow breaks all CSS transform transitions in all WKWebViews embedded in the same app, until the app is-relaunched. In the broken state, transitions are either very janky (low frame rate) or just jump directly to their end state with no intermediate frames.

In an app with a complex view hierarchy (e.g., Chrome for iOS), even a couple calls to -[UIView snapshotAfterScreenUpdates:YES] are enough to get into this broken state. In a simple test app, a few hundred calls are needed to make the jankiness obvious. The UIView being snapshotted is independent of WKWebView (neither contained in WKWebView nor an ancestor). The same bug happens when using -[UIView resizableSnapshotViewFromRect:rect afterScreenUpdates:YES withCapInsets:UIEdgeInsetsZero]. In both cases, changing the 'afterScreenUpdates' argument to NO prevents the bug from happening.

This doesn't seem to affect CSS keyframe animations, just CSS transitions.

I've attached a test app to FB9409883.

[Simon Fraser (smfr)]

<rdar://81165761>

[Simon Fraser (smfr)]

This appears to be a bug in UIKit. Tracked by the above radar.

[Jeroen Kroese]

Hi there, as of today the issue still persists. See the following bug reports on the Chromium project for examples of manifestations of this issue:

https://bugs.chromium.org/p/chromium/issues/detail?id=1231712
https://bugs.chromium.org/p/chromium/issues/detail?id=899130
https://bugs.chromium.org/p/chromium/issues/detail?id=1249723

Any updates on the UIKit bug logged in Radar?

[Brent Fulgham]

Note: This is actually tracked by this:
<rdar://81165591>

[Antoine Quint]

This might be as easy as setting `-[CALayer inheritsTiming]` to `NO` for the CALayer managed by PlatformCALayerCocoa.

[Antoine Quint]

Steps to reproduce:

1. Install Google Chrome
2. Open a second tab
3. Go to getbrentobox.com
4. Tap on the hamburger menu icon in the top right
5. Tap on the icon again to dismiss the sliding menu in the Web page
6. Go to the first tab
7. Go back to the second tab
8. Tap on the hamburger menu icon in the top right again

At this stage there is no animation, this is the bug.

[Antoine Quint]

(In reply to Antoine Quint from comment #5)
> This might be as easy as setting `-[CALayer inheritsTiming]` to `NO` for the
> CALayer managed by PlatformCALayerCocoa.

That indeed seems to work, need to find the best place to include this call for all remote layers.

[Antoine Quint]

Pull request: https://github.com/WebKit/WebKit/pull/8394

[EWS]

Committed 258781@main (46c1b789ed08): <https://commits.webkit.org/258781@main>

Reviewed commits have been landed. Closing PR #8394 and removing active labels.

[Antoine Quint]

This should be fixed in iOS 16.4 Seed 1.