Bug 218371 – REGRESSION (r256095): Adding a border-radius, border, or box-shadow breaks animations from scale(0)

• Status: RESOLVED
• Resolution: FIXED
• Component: Animations

[Mattan Ingram]

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.

[Miles Ingram]

This bug also occurs with transforms using scaleX(0) or scaleY(0).

[Smoley]

Thanks for filing, I can reproduce this on Safari 13.1.3, 14.0.1 and 14.1 with the supplied test case.

[Radar WebKit Bug Importer]

<rdar://problem/70906316>

[Antoine Quint]

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

[Antoine Quint]

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.

[Antoine Quint]

This regressed with macOS 10.15.4 / Safari 13.1, most likely when we switched over to the Web Animations engine.

[Simon Fraser (smfr)]

We're animating the layers but we haven't painted anything into them.

[Antoine Quint]

This was not actually caused by the move to Web Animations but rather r256095, the fix for bug 207434.

[Simon Fraser (smfr)]

The problem is we call setBackingStoreAttached() on the scale-0 layers at the start and never fix it later.

[Simon Fraser (smfr)]

(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.

[Simon Fraser (smfr)]

Adding a keyframe with non-zero scale fixes this.

[Simon Fraser (smfr)]

One possible fix here would be to have KeyframeEffect::computeExtentOfTransformAnimation() include the implicit 0 and 100% keyframes.

[Antoine Quint]

Created attachment 430836 [details]
Patch

[Antoine Quint]

Committed r278610 (238599@main): <https://commits.webkit.org/238599@main>

[Simon Fraser (smfr)]

This failed to fix some cases: bug 227733.