AngularJs animations not consistent when animating using transforms

Question

I have an AngularJS animation set up for sliding in panels of an ng-switch directive using the latest version of Angular (1.2.9). I am noticing curious behavior if I try to animate the position using "transform: translate(0,0);" instead of just the "left" attribute. When using translate, the animation sometimes works properly and sometimes not (I'd say it's about 50/50). However, if I animate the left attribute, it works correctly 100% of the time.

The CSS for the animation I am using is

.slide-animation.ng-enter,
.slide-animation.ng-leave {
  position: absolute;
  -webkit-transition: all ease-in-out 1s;
  -moz-transition: all ease-in-out 1s;
  -o-transition: all ease-in-out 1s;
  transition: all ease-in-out 1s;
}

.slide-animation.ng-enter {
  -webkit-transform: translate(-125%, 0);
  -ms-transform: translate(-125%, 0);
  transform: translate(-125%, 0);
}

.slide-animation.ng-enter.ng-enter-active,
.slide-animation.ng-leave {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

.slide-animation.ng-leave.ng-leave-active {
  -webkit-transform: translate(125%, 0);
  -ms-transform: translate(125%, 0);
  transform: translate(125%, 0);
}

Here is a fiddle to demonstrate the issue I am having: http://jsfiddle.net/HXACU/5/

I wanted to use translate because it gives significantly better performance than animating the left attribute on mobile devices. Do I have something wrong, is this a bug in Angular, or should I give up and just animate with "left"?

Answer 1

I think it's a rendering time race - caused by the 125%. I don't think it knows what 125% is until it's rendered, I've seen similar things before.

For argument sakes I replaced all % with px equivalents here: http://jsfiddle.net/27te5/1/ and it appears to be more stable (i can't break it)

.slide-animation, .slide-animation-transform {
  width: 96px;
}
.slide-animation.RL.ng-enter, .slide-animation.LR.ng-leave.ng-leave-active {
  left:150px;
}
/*etc. etc.*/

I'm sure you would rather % values but i hope it helps in any case.