"Failed to execute 'animate' ... no function was found that matched" after 2.2.0

[diagramatics]

I'm testing this on a fairly new Android 5.1.1 browser with a WebView of 44.0.2403.133 and using this code:

this.element.animate({
  opacity: [0, 1]
}, {
  duration: 300,
  fill: 'forwards'
});

That code fails on that environment with Uncaught TypeError: Failed to execute 'animate' on 'Element': The provided value is not of type '(EffectModel or sequence<Dictionary>)'.

I did test this code on IE11, Chrome, Firefox and Safari (all latest versions) though and it seems to work fine.

[diagramatics]

Actually scratch that, the polyfill throws a TypeError for it. It is in the docs about the API though.

[alancutter]

Which version of the polyfill are you using? This new syntax is only present in v2.2.0.

[diagramatics]

Ah right. I did downgrade to 2.1.5 after looking at the issues lately since I thought this is connected to 2.2.0 having a regression bug.

Will test again when I have time. I'll close this for now. Thanks for the help.

[diagramatics]

Opening this again. v2.2.0 doesn't seem to work on this specific Android browser.

[platosha]

I also get a similar error on Android 5.0.

After just importing web-animations-next-lite.min.js from v2.2.0, there’s this error line in the console:

Uncaught TypeError: Failed to execute 'animate' on 'Element': No function was found that matched the signature provided..

navigator.userAgent
"Mozilla/5.0 (Linux; Android 5.0; SM-G900F Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.59 Mobile Safari/537.36"

Another phone with Android 6.0.1 gives this error, exactly similar to one in the first comment:

Uncaught TypeError: Failed to execute 'animate' on 'Element': The provided value is not of type '(EffectModel or sequence<Dictionary>)'

navigator.userAgent
"Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MHC19Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.133 Mobile Safari/537.36"

See JSBin: http://jsbin.com/sovoyezazo/edit?html,console,output

[dstoc]

This is apparently affecting the latest release of Samsung Internet: https://play.google.com/store/apps/details?id=com.sec.android.app.sbrowser&hl=en

[alancutter]

The bug is a lack of try catch around var animation = element.animate({'opacity': ['1', '0']}, {duration: 1, fill: 'forwards'}); https://github.com/web-animations/web-animations-js/blob/master/src/web-animations-bonus-object-form-keyframes.js#L19 which raises a TypeError if the native Element.animate exists but doesn't support object form.
Thanks @naoak for the debugging assist.

[alancutter]

This bug affects versions of Chrome up to 46 (which branched on Aug 21 2015). The change that made it no longer a TypeError in Chrome was https://chromium.googlesource.com/chromium/src/+/b519a820847babea5ef40e587f4e4c7eb9d672e8 (which landed on Sep 8 2015).

[naoak]

Thanks @alancutter for your detail clarification. This really helps!

[alancutter]

Just released 2.2.1 with a fix for this issue.
Thank you for the reports, please let me know if there are any further issues.