Bug 222595 - Animation from "scale()" to "scale() translate()" does not yield the expected result
Summary: Animation from "scale()" to "scale() translate()" does not yield the expected...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Martin Robinson
URL:
Keywords: InRadar
: 235802 235804 (view as bug list)
Depends on:
Blocks: 235757
  Show dependency treegraph
 
Reported: 2021-03-02 06:44 PST by Antoine Quint
Modified: 2022-02-14 06:23 PST (History)
8 users (show)

See Also:


Attachments
Test (340 bytes, text/html)
2021-03-02 06:44 PST, Antoine Quint
no flags Details
Firefox (494.75 KB, video/quicktime)
2021-03-02 06:45 PST, Antoine Quint
no flags Details
Safari (182.06 KB, video/quicktime)
2021-03-02 06:45 PST, Antoine Quint
no flags Details
Patch (31.42 KB, patch)
2022-02-08 08:15 PST, Martin Robinson
no flags Details | Formatted Diff | Diff
Patch (49.88 KB, patch)
2022-02-08 10:03 PST, Martin Robinson
no flags Details | Formatted Diff | Diff
Patch (53.11 KB, patch)
2022-02-09 06:42 PST, Martin Robinson
no flags Details | Formatted Diff | Diff
Patch (60.74 KB, patch)
2022-02-11 05:00 PST, Martin Robinson
no flags Details | Formatted Diff | Diff
Patch (53.81 KB, patch)
2022-02-14 03:17 PST, Martin Robinson
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Antoine Quint 2021-03-02 06:44:40 PST
Created attachment 421929 [details]
Test

The attached test runs the following animation:

    document.querySelector("div").animate({ transform: ["scale(2)", "scale(0.1) translateX(-200px)"] }, 1000);

In Firefox and Chrome you can see the elements animate one way (see screen recording) and in Safari (after r273656, the fix for bug 222545) another way. We likely have the incorrect behavior.
Comment 1 Antoine Quint 2021-03-02 06:45:02 PST
Created attachment 421930 [details]
Firefox
Comment 2 Antoine Quint 2021-03-02 06:45:15 PST
Created attachment 421931 [details]
Safari
Comment 3 Radar WebKit Bug Importer 2021-03-02 06:45:58 PST
<rdar://problem/74926700>
Comment 4 Antoine Quint 2021-03-02 07:02:52 PST
This is not a recent regression, at the very least this behavior was also observable in Safari 13 before Web Animations were supported, using a similar test with CSS Transitions.
Comment 5 Antoine Quint 2022-02-07 00:14:24 PST
Cc'ing Martin who's been looking at css-transforms issues recently.
Comment 6 Martin Robinson 2022-02-08 08:15:40 PST
Created attachment 451251 [details]
Patch
Comment 7 Martin Robinson 2022-02-08 10:03:31 PST
Created attachment 451268 [details]
Patch
Comment 8 Antoine Quint 2022-02-08 11:36:27 PST
Yes, this is working fine for me in STP 139 and Safari in macOS 12.3 Beta.
Comment 9 Antoine Quint 2022-02-08 11:36:53 PST
Oops, I commented on the wrong bug!
Comment 10 Martin Robinson 2022-02-09 00:34:10 PST
Comment on attachment 451268 [details]
Patch

Looks like this is hitting an assertion failure in an assertion that I added. I'm investigating this now. It also probably makes sense for this to land after the patch in bug 236116.
Comment 11 Martin Robinson 2022-02-09 06:42:37 PST
Created attachment 451368 [details]
Patch
Comment 12 Martin Robinson 2022-02-11 05:00:44 PST
Created attachment 451676 [details]
Patch
Comment 13 Martin Robinson 2022-02-14 03:17:12 PST
Created attachment 451879 [details]
Patch
Comment 14 EWS 2022-02-14 06:04:21 PST
Committed r289732 (247217@main): <https://commits.webkit.org/247217@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 451879 [details].
Comment 15 Antoine Quint 2022-02-14 06:22:45 PST
*** Bug 235804 has been marked as a duplicate of this bug. ***
Comment 16 Antoine Quint 2022-02-14 06:23:21 PST
*** Bug 235802 has been marked as a duplicate of this bug. ***