1.4 to 1.5 Regression - Flickering issue when using ng-show/ng-hide

[ghost]

Overview of the Issue -
Today i updated AngularJS 1.4 to AngularJS 1.5 and i noticed a flickering issue when loading the application with hidden ng-show/hide elements (see video)
Angular Version(s) - Regression from 1.4 to 1.5
Browsers and Operating System - Chrome 48.0.2564.97 (64-bit) MacOS 10.11.3 (15D21)
Reproduce the Error - See video

https://monosnap.com/file/d7ULotSANvDOqi7MEmIPYerZ1xH1O6
hints: I'm refreshing the pages multiple times switching between angularjs 1.4 and 1.5. Take a look at the element that appears under the search box when using 1.5 and the clear search element that appears right from the filter chapters... box although it should be hidden

When refreshing the page the ng-hide / ng-show elements are shortly visible on pageload in 1.5 (before angularjs doesn't compile the directives ?)

Suggestion: Quick fix is to use ng-if instead of ng-show/hide until the bug is fixed

[Narretz]

Thanks for the report. Can you the following for us:

1. Please check all versions of 1.4.x to see in which version the error first occurs (all changes from 1.5 are in 1.4)
2. Please reproduce the error in a plnkr.co or similar. Focus on the structure of the DOM (e.g. does the element that should be hidden have parent elements that are also animatable?)

[m-amr]

Did you try ng-cloak
https://docs.angularjs.org/api/ng/directive/ngCloak

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display

I think all angular apps (that doesn't use ng-include to load template)
should use ng-cloak to prevent to hide all templates until angular compiles it.

[ghost]

Just did it sorry. 1.4.4 is fine the bug occurs for the first time in 1.4.5. I tried to reconstruct it in plnkr.co without success i will try it tomorrow again.
I will check tomorrow if the html components have CSS animatable if you meant that.

With ng-cloak it just flickers differently when i put it on different elements

[Narretz]

No, I actually just mean if they use directives that are animatable, such as ng-if, ng-class

[ghost]

I isolated a part of the code:
http://i.imgur.com/ClrMirj.png

A parent contains a ng-class but even when i remove it, the problem still persists!

I will try to make a plnkr during the day.

[Narretz]

ngShow and ngHide are also considered class based animations, so they will also add rAF spacing.

[ghost]

Ok i found the issue ! :) Sorry it was my fault i didn't update the angular-animate to the latest version (it was 1.4.X). Maybe it fixes @havenchyk issue too

[garycuthbert]

Hi, I am experiencing a similar issue with angular 1.5.8 (having just upgraded from v 1.12.15). I just wondered if this may have re-appeared in the latest version (i am using the 1.5.8 version of angular-animate).

The problem is very apparent under IE11, it is there under Chrome also but more often than not the transition is too fast to notice.

The directive i have is a tab control that uses transclusion to include tab pages. The flicker i am experiencing (which briefly shows the new and old active tab page html side by side) is when the user switches between tabs (i.e. after compilation and template loading). The code uses ng-show with a boolean flag to decide whether or not to display the page (of which a maximum of 1 is active at any one time).
If i replace ng-show with ng-if there is no flicker.
The work around i had been planning to use was to use ng-class with the same ng-show conditional flag to activate a custom css class '.myCloak { display: none !important}' (i.e. the same css used by ng-cloak) e.g.
ng-show="tab.active" ng-class="{'myCloak' : tab.active}" which does work around the problem.

I will attempt to create a plunkr to demonstrate but it may take a while. I could raise this as a separate issue if you prefer?

[garycuthbert]

Hi, just found issue #14015 which is open, i will add my finding there. Thanks

[Soman1]

Hi,
Can any one please suggest , how to handle the nudging to User if he has been to different tab other than the main application tab for about more than 3 mins. Any sample or similar issue ?