ngMessages(ngAnimate 1.4.5?): Flash of content before animation begins.

[topherfangio]

I just noticed a bug which I thought was in Angular Material, but I now believe is in Angular itself.

When the animation for my ng-messages begins, there is a flash where you can see all messages before the animation begins. Although the issue is appearing with ngMessages, I think it might be a broader $animate issue because I can reproduce this by upgrading only angular.js and angular-animate.js from 1.4.4 to 1.4.5 (leaving everything else including angular-messages.js at 1.4.4).

Oddly, if I leave either file at 1.4.4 (it doesn't matter which one), the issue is not reproducible, so it seems to be an issue when both files are at version 1.4.5.

Version Introduced: 1.4.5?
Versions Tested: 1.4.4 (works here; broken on others), 1.4.5, 1.4.6, 1.5.0-beta.0
Browsers: All (IE Edge, Safari, Chrome/Firefox on both OS X and Windows)

Steps to Reproduce:

1. Open https://codepen.io/topherfangio/pen/PPbLaR
2. Click on the input and type a 5 so the new value is 12345

You will see the errors appear for a split second, disappear, and then they will animate into place.

Again, you can edit the Codepen settings to change either file to 1.4.4 and it fixes the issue.

Additional Info:

Might be related to #12825.

I did not see any relevant breaking changes in the changelog between 1.4.4 and 1.4.6 which would account for this. Please let me know if I can provide any additional information.

[ThomasBurleson]

@robertmesserle - is this related to any changes you may have made ?
@matsko - what are your thoughts here ?

[robertmesserle]

@ThomasBurleson If this is an AngularJS issue, then no - I have no commits in the angular.js repo.

[matsko]

I see what's going on here. I'll have a look later today.

[topherfangio]

I reproduced the demo without material just to make sure it wasn't some weird interaction with our CSS/JS. You can view it below if it's helpful:

https://codepen.io/topherfangio/pen/zvoXjz

@matsko Thanks for taking a look!

[kvetis]

It also happens on ngIf in IE and Firefox, but not in Chrome. I've created a JSFiddle that illustrates the difference:

Reproduction
In this fiddle, delete the contents of the input box.
http://jsfiddle.net/kvetis/ssnkqog6/3/
Affected Versions: 1.4.5, 1.4.6, 1.4.7 (1.4.4 is okay, probably introduced in 1.4.5)
Browsers: Chrome 45 (ngMessages), IE11 (ngMessages, ngIf), FF 39 (ngMessages, ngIf) @ Windows 8.1 home

Interesting thing is that if you try the second form on this Angular Material demo page: https://material.angularjs.org/0.11.2/#/demo/material.components.input
The issue does not occur on the Client Name input, but appears on Client Email (I have no theory why.)