Bug(MdTabs): Translate animation not working in IE 11 / Edge

[macjohnny]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When changing tabs, the content should be animated to translate to the left or to the right.

What is the current behavior?

In IE 11 / Edge

What are the steps to reproduce?

http://embed.plnkr.co/bXpnE7/

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.1.3, Material 2.0.0-beta.6

Is there anything else we should know?

Apparently, this is due to animating with "translate3d()". The sidenav e.g. sets the style property instead of using the animation API, which seems to work.

[macjohnny]

This should probably solved similar to MdSidenav:
https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav.ts#L509

[crisbeto]

You need to include a polyfill for web animations, if you want most of the Material animations to work under IE. The sidenav is an exception that will be moved to the Angular animations eventually.

[macjohnny]

@crisbeto you are right, i forgot to include the polyfill in the plunkr. However, the problem still remains even with the polyfill. I am currently investigating the issue with a simple plunkr example:
https://plnkr.co/edit/AnLKIlfuz5S6siBZQTIY?p=preview
it seems that this one does not work in IE either. so it might be related to the angular animations API.
What is strange though is the fact that when wildly clicking the toggle button or wildly changing tabs, the animation seems to happen, i.e. when the new animation starts before the previous one completed.

[macjohnny]

@crisbeto see also https://material.angular.io/components/component/tabs as an example

[macjohnny]

the issue here in material is most probably due to a bug in angular: angular/angular#17239

[julianobrasil]

@macjohnny , I tested here against IE11 and Edge.

IE11: Although there's a little delay, and something that resembles an animation, the rectangle's position is switched form one side to another.

Edge: worked fine

[macjohnny]

@julianobrasil can you check what happens in https://fiddle.jshell.net/fu7mrqn0/8 ?
the first example does not work in my IE 11. and I suppose this is exactly the problem with this issue here and the one here: angular/angular#17239

[julianobrasil]

@macjohnny , here is the report:

IE11: didn't work fine in just one case: "translate with percentages, 2 keyframes".
In my opinion: it's like the plunker example, where the so called "animation" seems more like a subtle change of position. In the fiddle's case, as the square goes back to its original position in the end, it seems the animation did not happen at all.

For all the others cases in IE11, the animation ran smoothly.

Edge: no problem. All cases seemed to work as expected.

[macjohnny]

@julianobrasil thanks for having a look at it.
yes, in the jsfiddle example the square jumps back to its original position after the animation, which is no problem since no state after the animation was defined.
the problem still remains, however. if you compare the jsfiddle in chrome and in IE 11, the difference is very clear: in IE 11, the box does not move at all. also in the "translate with percentages, 3 keyframes" example, the box jumps to half-the translation after half the transition time, which to me seems like a problem animating between the first and the second keyframe.

[macjohnny]

Here is a workaround: using translate3d(0%,0,0) instead of translate3d(0,0,0) apparently fixes the problem, see this example: https://plnkr.co/edit/1Ffduxu1N3PJKgHutRuw?p=preview

However, I think this should be fixed in web-animations-js, since translating from translate3d(0,0,0) to translate3d(100px,0,0) works, whereas translating from translate3d(0,0,0) to translate3d(100%,0,0) does not.

[macjohnny]

@andrewseguin @jelbourn the workaround suggested here and in PR #4986 seems to work fine, we had no more issues with that.