ngAnimate: ngClass does not update correctly when switching browser tabs

[wimme]

I created a demo to illustrate the issue: http://plnkr.co/edit/6yDtaN2NUF8xUOWVyboT?p=preview

When you open it, it works correctly, but leave it running and switch to another tab in your browser for a minute and come back. Then the colors don't match anymore with the displayed values, because there are suddenly multiple classes applied to the elements. After it went through all severities, then it is working correctly again.

I use this in an app to monitor values and show their alarm color, so when the severity changes while the user was doing something else, then the alarm color is suddenly not correct anymore when he comes back to the app (knowing the severity might not change more than once a day).

When removing 'ngAnimate' from the modules, the issue does not occur. I'm not using ngAnimate for this functionality, but I need to have ngAnimate as a dependency for other elements.

I have this issue in Chrome, Firefox, IE and Edge on Windows.

[Narretz]

This must related to how broweser throttle timeouts / requestAnimationFrame when the browser tab is unfocused, see for example here: http://stackoverflow.com/a/16033979/787333

This seems to make ngAnimate to attempt an animation where there is actually none, and then to not close of this animation correctly.

You can use a classFilter to block animations on this element:

app.config(function($animateProvider) {
  $animateProvider.classNameFilter((/!severity/));  
})