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

[HarelM]

Still no luck (Safari 5 on windows 10):
I have added the following to my polyfills.ts file:
import "raf/polyfill"; in order to polyfill requestAnimationFrame
And am now getting the following error:
TypeError: setting a property that has only a getter
When using angular-cli and this library the only code I can see is the minified version. Angular-cli and probably other packagers can minify the code themselves, is it possible to ship this code not minified so I can report an issue with more details?

[simonness]

Hey @HarelM, bumped into this too. Using an unminified version of web-animations-js figured out the problem is #160 (the property with only a getter is _isFinished).

@ewilligers the fix for this didn't make it into the latest release 2.3.1, are there any plans for another release?

[devakone]

Ran into the same issue as @HarelM on Safari for Windows 10.

[japalo]

Safari in Windows is a really old version of the browser, so it's not that surprising. If you are trying to test your website on safari, you cannot rely on safari on Windows sadly.

[devakone]

Got you, makes sense now.