Animation with delay in firefox developer edition weird behavior

Question

I have recently started using Firefox developer edition and i have found a strange behavior on animations with a delay.

http://plnkr.co/edit/Tr1nd5r0gAyy3eH3Z7Zh?p=preview

.selection-buttons.ng-animate.ng-hide-add {
  animation: 30s linear 1s fadeOutDown;
  opacity: 1;
}

.selection-buttons.ng-animate.ng-hide-remove {
  animation: 30s linear 1s fadeInUp;
  opacity: 0;
}

If you open this Plunker with Firefox Developer the animation will play correctly but then the text will hide again for a couple seconds and then come back (or will be shown again for a couple seconds and then disappear when you click the 2nd time). I have tested this in other browsers (Chrome, Firefox standard, Safari and Pale Moon) and the animation works fine.

The animations are realized using animate.css which i used the animation names in the CSS in order to use them together with ng-animate from angular, but I haven't tested normal animations without ng-animate

I have noticed that ng-animate removes its classes way after the animation ended. I have timed it and the class removal is delayed exactly by half of the animation duration (if you increase the animation duration, the delay will increase accordingly) so the animation ends but the other properties added by the class (such as opacity) are left until the classes are removed. This happens for any delay value, regardless of the value set, as long as there is a delay on the animation it will do this. Surprisingly it will happen even if there's a delay on transitions (but still using an animation) either from the transition property or from the transition-delay property

If i remove the delay from the CSS attribute the animation works fine.

I have also tested using animation-name, animation-duration and animation-delay instead of the animation property

Answer 1

I have opened a ticket on bugzilla and it has been confirmed to be a bug introduced by a new feature (hiRes dom timestamps) replacing the current timestamps on Firefox versions starting from 44 and Chrome versions starting from 49. Firefox Developer edition uses experimental builds, while Firefox standard only stable builds (latest stable is currently 42, which is unaffected, and so is version 43).

https://bugzilla.mozilla.org/show_bug.cgi?id=1231619

The Angular team has been notified of this bug