Well, it does seem like an Angular.js animate bug. It seems that if a class doesn't have an ng-amination registered for it, it never tries to check if it has animations ever again (at least until the page is reloaded). A possible explanation (I am speculating here) might be that Angular.js unregisters whatever listeners it might have had on a class, on error.
Anyway, you can fix this by adding a complementary min-width declaration, with an instant animation, covering all the available resolutions.
For example:
@media only screen and (min-width : 640px) {
.animate-show-hide.ng-hide-add, .animate-show-hide.ng-hide-remove {
-webkit-transition:all linear 0.0001s;
-moz-transition:all linear 0.0001s;
-o-transition:all linear 0.0001s;
transition:all linear 0.0001s;
display:block!important;
}
.animate-show-hide.ng-hide-add.ng-hide-add-active,
.animate-show-hide.ng-hide-remove {
opacity:0;
}
.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}
}
Important! Please note that I have used very short animation intervals, instead of 0. This is because if the animation length is 0 - it gets optimized away, leading to the same bug.