Bug 245147

Summary:	Safari 16 regression: CSS animations stutter during DOM mutation
Product:	WebKit	Reporter:	alex
Component:	Animations	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED DUPLICATE
Severity:	Normal	CC:	alex, dino, graouts, graouts, heystoneybatter, karlcow, mrobinson, webkit-bug-importer
Priority:	P2	Keywords:	BrowserCompat, InRadar
Version:	Safari Technology Preview
Hardware:	All
OS:	Unspecified

Description alex 2022-09-13 09:59:46 PDT

Reproduction:

https://codepen.io/aeharding/pen/poVEmWO

After clicking "Do an intensive task", you will see the spinner stops momentarily/stutter.

This regression started occurring after upgrading to Safari 16 (both iOS 16 and m1 macbook air running macOS 12.6) yesterday.

When I test on an older iOS (15) version, an older macOS version (12.2 tested on a different macbook air m1), Chrome or Firefox or iPadOS, the CSS animation does not stutter at all.

This is a problem for any website that has a loading indicator while rendering a large amount of content to the DOM.

This is also occurring on Safari Technology Preview 153 with macOS 12.6.

Comment 1 Antoine Quint 2022-09-13 11:33:41 PDT

This appears to be specific to rotate animations, a scale animation does not exhibit the same problem.

Comment 2 Radar WebKit Bug Importer 2022-09-13 11:34:47 PDT

<rdar://problem/99881231>

Comment 3 M 2022-09-16 07:54:15 PDT

I noticed the rotation animation issue in a WKWebView app I was editing. The app uses the same animation elsewhere without issue but it stutters now in iOS16 on one page that does some ML processing. It worked perfectly in all earlier versions iOS. Antoine Quint is correct though that scale animations do not seem to have this issue.

Additionally, I have been seeing issues with opacity animations in a number of places. For example, I noticed the NYT Spelling Bee mobile site suddenly had janky fade-ins and I compared on my iOS16 phone and my partner's 15.6 phone. The fade-ins were smooth on 15.6. So perhaps something is going on with CSS3 animations more broadly?

Comment 4 Antoine Quint 2022-10-24 06:11:16 PDT

The problem goes away if we add an intermediary keyframe like so:

    50% { transform: rotate(180deg) }

Need to retest now that the fix for bug 243864 landed, could be relevant.

Comment 5 Antoine Quint 2022-10-24 06:39:48 PDT

Confirmed that this progressed with 255723@main.

*** This bug has been marked as a duplicate of bug 243864 ***