Polyfill disagrees with native Element.animate impl

[dglazkov]

http://jsbin.com/cexili/1/edit

In M36+ Chrome, you should see smooth animation rotating from "TWO" to "ONE", then back to "TWO", then to "THREE".

Uncomment the script code to include the polyfill and see the difference. My experience is that the polyfill turns the rotations into erratic movement of the rotating panels.

Pls halp.

[shans]

There are two things going on here:

(1) getComputedStyle(...) is returning a matrix, which doesn't seem to be animating nicely with the translate values provided. We should fix this case.

(2) the flicker that you see when using the polyfill is due to the asynchrony in onfinish being .. more asynchronous .. in the polyfill than in the native implementation. It's better to avoid trying to re-implement forwards fill, and instead set the underlying fill up front (or just use forwards fill directly).

I've fixed both issues (at least for the demo) by changing the code: http://jsbin.com/zilajimamidi/1/edit

We will also address the first problem in the polyfill.

[dglazkov]

Thank you @shans 😄

[tim-loh]

There's a long outstanding "TODO: Work out what to do with non-px values." for the matrix interpolation case.