Bug 218371

Summary: REGRESSION (r256095): Adding a border-radius, border, or box-shadow breaks animations from scale(0)
Product: WebKit Reporter: Mattan Ingram <mattaningram>
Component: AnimationsAssignee: Antoine Quint <graouts>
Status: RESOLVED FIXED    
Severity: Normal CC: dino, graouts, graouts, koivisto, milesingrams, simon.fraser, smoley, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: Mac   
OS: macOS 10.15   
URL: https://codepen.io/mattaningram/pen/zYBdjRq
See Also: https://bugs.webkit.org/show_bug.cgi?id=207434
https://bugs.webkit.org/show_bug.cgi?id=227733
Attachments:
Description Flags
Test
none
Test (Web Animations)
none
Patch simon.fraser: review+, ews-feeder: commit-queue-

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>
Comment 15 Simon Fraser (smfr) 2021-07-06 21:14:12 PDT 
This failed to fix some cases: bug 227733.