Safari: keyframes not working as expected

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

When using the API to define elements inline, keyframes animation seems to require the ‘from’ property to be explicitly set in Safari/iOS Safari only. According to the W3C spec, this property is supposed to be optional.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-9nih37?file=src%2Fstyles.css

Please provide the exception or error you saw

Not applicable

Please provide the environment you discovered this bug in

Angular CLI: 12.1.0
Node: 14.17.3
Package Manager: npm 7.20.0
OS: Mac OS, iOS

Anything else?

1. Open the Stackblitz example in Chrome. Notice that a small green line is animated.
2. Open the Stackblitz example in Safari. Notice that the small green line is not animated.
3. Go to styles.css in the example and try uncommenting the ‘from’ property. Notice that the line animates as expected.

When using vanilla HTML/Javascript/CSS, this issue is not reproducible. See this Stackblitz.

In the Angular example, the length of the line affects the correct setup for the animation. That will sometimes only be known at runtime, which is why omitting the ‘from’ property is handy.

WORKAROUND: Using the Web Animations API seems to work in all browsers. The Angular example includes an example of this workaround. The intended code:

const length = line.getTotalLength();
line.style.strokeDasharray = `${length} ${length}`;
const lineAnimationTiming: EffectTiming = {
      duration: 1000,
      easing: 'ease-in-out'
};
line.animate(
    [
    { strokeDashoffset: length },
    { strokeDashoffset: 0 }
    ],
    lineAnimationTiming);

[petebacondarwin]

Thanks to both @dario-piotrowicz and @jzabinski-dolios for your excellent analyses. I will close this as it appears the problem is with the browser and not Angular.

[jzabinski-dolios]

Thank you @dario-piotrowicz! That makes a lot of sense; I agree that this is likely a timing issue. I don’t know very much about the inner workings of Webkit browsers, but based on some experiments yesterday, the Javascript framework seems to run in a separate process. (Following these instructions, I tried to install the latest Webkit build to test that. MacOS security protocols pretty much destroyed the installation process, but whenever the security protocols disrupted something, they would inform me as to which process was disallowed. These processes always seemed to launch in no particular order.)

That being said, I confirmed that your workaround of installing the animation CSS after those elements are initialized works well in both Safari and Safari Tech Preview.

It sounds like, for Safari, if we want to dynamically load animated elements, the animation CSS needs to always load after the element is initialized. To ensure that, we have two options:

1. Dynamically load the CSS after loading the element, via setTimeout and .innerText
2. Use the Element.animate method

Thanks so much for working through this with me. I’m fine with closing this bug, and letting Webkit handle it (if they so choose).