ngClass not working properly when tab is not focused

[ih57452]

This may be an issue with Angular itself, but the only way I can reproduce it is by including the Material module.
http://codepen.io/anon/pen/xZxQEg
When you click in the preview pane of that Codepen, it starts a 2 second timer and then cycles through red, green, and blue classes. It works like it should when that tab is focused, but when you start the timer and then switch to another tab while the classes are being changed, it will still have both red and green classes applied but not the blue class which is the only one it should have. I've tried it on Chrome and Firefox and with a few older versions of Angular and Material and none of them worked like it should.

[Narretz]

This looks similar to angular/angular.js#12842. The underlying issue is that browsers change the behavior of requestAnimationFrame / timeouts when the tab is unfocused. It's possible that this affects material unrelated to angular core, though.

[ih57452]

That's exactly what I'm trying to do: change classes depending on live telemetry data.
My example above does the same thing when I remove Material and just require Animate. I didn't think to try that before since Animate was being required by Material and not directly from my app.

[ih57452]

angular/angular.js@a3a7afd has fixed this.