[Bug] Safari TypeError undefined

[luchillo17]

I'm getting this error on safari, the same animation works in Chrome.

[alancutter]

Can you provide the version of web-animations.js being used and the code that's invoking it (_triggerWebAnimation)?

[luchillo17]

Here you go, this issue is in the Angular 2 repo, we have narrowed down the issue to animations that contains background:
angular/angular#10407 (comment)

[luchillo17]

I'm such a derp, background isn't the same as background-color, even if css allows it as the shorthand and defines everything else as initial, that doesn't mean that the animation would do the same, changing from background to 'background-color' fixed the issue, however if the chrome version does work that means is the polyfill who fails to deal with such a case right?

[alancutter]

Thank you for the repro case, I'm able to repro this in Safari.
There should be no problem with using background instead of backgroundColor.
Investigating.

[luchillo17]

Heeeyyy, how's that investigation going? does it work now with the background shorthand? can we close this?

[japalo]

In this thread angular/angular#15918 i ask for a feature where the developer gets a warning if there are any known issues with the property that is being animated. I had a hard time finding a solution to my problem until i started a trial-and-error-approach by removing stuff until i found what was causing my issue.

Maybe a known issue warning should be triggered as a quick and dirty solution to this? Just to avoid unecessary frustration from developers with the same problem as I had.

I know i would appreciate a feature like that. :)

[HarelM]

This issue is a bit old by I have a similar issue now with angular 4:
I've uncommented the following in polyfills.ts:
import "web-animations-js";
And I get the following error in Safari on windows 10:
TypeError: 'undefined' is not a function (evaluating 'i(d)')
This is from the minified version but I'm guessing that there's a real issue there...
Any thoughts?
This happen on startup, not when animating something.
This is after I got the following error in Safari:
Can't find variable: requestAnimationFrame
which led me to add this polyfill...

[japalo]

@HarelM I am quite sure that windows Safari is using an old version of safari. That could mean that requestAnimationFrame does not exist in that version. Have you tried it in a safari using a mac instead?

[HarelM]

I'm pretty sure you are right, but I don't have a mac to test that.

[ewilligers]

@HarelM

See docs/support.md

The polyfill is supported on modern versions of all major browsers, including:

• Safari (iOS) 7.1+
• Safari (Mac) 9+

In particular, the polyfill requires requestAnimationFrame. If your browser does not have requestAnimationFrame, consider loading a requestAnimationFrame polyfill first (example).

[HarelM]

@ewilligers Thanks for the info!
I was under the impression requestAnimationFrame was part of this polyfill. I'll add it and report back.