Bug 218371 - REGRESSION (r256095): Adding a border-radius, border, or box-shadow breaks animations from scale(0)
Summary: REGRESSION (r256095): Adding a border-radius, border, or box-shadow breaks an...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 14
Hardware: Mac macOS 10.15
: P2 Normal
Assignee: Antoine Quint
URL: https://codepen.io/mattaningram/pen/z...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-10-29 20:14 PDT by Mattan Ingram
Modified: 2021-06-08 10:21 PDT (History)
9 users (show)

See Also:


Attachments
Test (776 bytes, text/html)
2020-11-02 06:22 PST, Antoine Quint
no flags Details
Test (Web Animations) (741 bytes, text/html)
2020-11-02 06:26 PST, Antoine Quint
no flags Details
Patch (5.46 KB, patch)
2021-06-08 07:23 PDT, Antoine Quint
simon.fraser: review+
ews-feeder: commit-queue-
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Mattan Ingram 2020-10-29 20:14:11 PDT
An element with a border-radius, box-shadow, border, or even just plain text will not render when running a keyframe animation from scale(0).

https://codepen.io/mattaningram/pen/zYBdjRq

Oddly if they are within a position: fixed element the animations render fine.

Considering an animation from scale(0) is common, this must be impacting a number of websites.
Comment 1 Miles Ingram 2020-10-29 20:21:26 PDT
This bug also occurs with transforms using scaleX(0) or scaleY(0).
Comment 2 Smoley 2020-10-30 19:09:34 PDT
Thanks for filing, I can reproduce this on Safari 13.1.3, 14.0.1 and 14.1 with the supplied test case.
Comment 3 Radar WebKit Bug Importer 2020-10-30 19:09:48 PDT
<rdar://problem/70906316>
Comment 4 Antoine Quint 2020-11-02 06:22:54 PST
Created attachment 412911 [details]
Test

I've simplified the test case a bit. Some cases where the animations work as expected:

- using `scale(0.0001)` instead of `scale(0)`
- setting an explicit to-keyframe set to `scale(1)`
- changing the from-keyframe to a to-keyframe
Comment 5 Antoine Quint 2020-11-02 06:26:49 PST
Created attachment 412912 [details]
Test (Web Animations)

Attached a different testcase where we use the Web Animations API instead:

for (let element of Array.from(document.body.querySelectorAll(".test")))
    element.animate({ transform: "scale(0)" }, 1000);

There is also no visible animation in this case.
Comment 6 Antoine Quint 2020-11-02 06:50:15 PST
This regressed with macOS 10.15.4 / Safari 13.1, most likely when we switched over to the Web Animations engine.
Comment 7 Simon Fraser (smfr) 2020-11-02 08:04:20 PST
We're animating the layers but we haven't painted anything into them.
Comment 8 Antoine Quint 2021-05-27 11:49:22 PDT
This was not actually caused by the move to Web Animations but rather r256095, the fix for bug 207434.
Comment 9 Simon Fraser (smfr) 2021-06-01 10:07:47 PDT
The problem is we call setBackingStoreAttached() on the scale-0 layers at the start and never fix it later.
Comment 10 Simon Fraser (smfr) 2021-06-01 10:08:07 PDT
(In reply to Simon Fraser (smfr) from comment #9)
> The problem is we call setBackingStoreAttached() on the scale-0 layers at
> the start and never fix it later.

setBackingStoreAttached(false), that is.
Comment 11 Simon Fraser (smfr) 2021-06-01 10:12:34 PDT
Adding a keyframe with non-zero scale fixes this.
Comment 12 Simon Fraser (smfr) 2021-06-01 10:15:11 PDT
One possible fix here would be to have KeyframeEffect::computeExtentOfTransformAnimation() include the implicit 0 and 100% keyframes.
Comment 13 Antoine Quint 2021-06-08 07:23:07 PDT
Created attachment 430836 [details]
Patch
Comment 14 Antoine Quint 2021-06-08 09:28:02 PDT
Committed r278610 (238599@main): <https://commits.webkit.org/238599@main>