IE (tested 9-11) break on transforms with -%

[kitsunde]

[{transform: "translate(0,0)"}, {transform: "translate(0,-100%)"},]

gets applies as translate(0px, calc(0px, -x%), 0px). No version of IE appear to support calc() inline of translate or at least not in this case.

See: http://jsfiddle.net/kitsunde/8N5LE/

[dstoc]

We might be able to special case 0 here, but in general, if calc() works, but doesn't work inside translate that's an IE bug and there's not really much we can do about it :( See the note in https://github.com/web-animations/web-animations-js#experimental-features.

To avoid it, don't attempt to interpolate between different units.

[kitsunde]

Ah, it seems I was mixin 0 and 0% making 100% work in some cases and -100% not work in others. Thanks for clearing that up.

Maybe it could be worth adding to documentation at least, it's not entirely obvious that calc will fail in all versions of IE, since just having basic support doesn't seem to be enough.