Animations Broke When Tab Open

[pwright322]

Note: for support questions, please use one of these channels: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Class does not update through ng-class when ngAnimate is included and new tab/window is opened. This seems to affect at least IE, Edge, and Safari (Mac) browsers. Version 1.4.x seems to behave as expected and this seems to have broken in 1.5

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (template: http://plnkr.co/edit/tpl:yBpEi4).

Demo of Issue

1. Create an angular 1.5 app with ngAnimate included.
2. Use ng-class on an element (e.g. is-processing).
3. Add a click handler to the element that opens a new tab/window and updates the ng-class to a state (e.g. item is processing).
4. Click the item to trigger processing
5. Asynchronously reverse the property (e.g. item is done processing). With the window open, the class is-processing is never removed from the element even though the model that drives it is false.

What is the expected behavior?
The ng-class updates the class based on the model regardless if app is in the inactive tab.

What is the motivation / use case for changing the behavior?
ng-class is basic directive that should continue to work.

Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.

Seems to happen in 1.5.x versions of angular. 1.4.x seemed to work. Affects IE, Edge, Safari on Mac.

Other information (e.g. stacktraces, related issues, suggestions how to fix)

[pwright322]

This seems to be a problem with ngAnimate. Calling $animate.addClass and $animate.removeClass directly (as ng-class would do when watches change) exhibit the same behavior. Not sure if opening a new window would affect anything in animationQueue or if it is restricted to just addClass/removeClass.

https://jsfiddle.net/wjky7sxf/1/

[Narretz]

We've changed the way ngAnimate updates the classes when the window is not focused, because browsers don't fire requestAnimationFrame callbacks in that case. We use setTimeout instead. I assume browsers have their issues with that too.

[pwright322]

I notice that if you are in another tab that wasn't opened through the same method via window.open, it continues to work.

In the meantime, to workaround, we created a "lite" version of ng-class that uses addClass/removeClass directly on the jqLite/jquery element. It would be preferable if this continued to work as it did in 1.4, especially sine there is no animation taking place, but ng-class uses $animate for all its add/remove operations.