Angular 1.5.8 - flickering related to ng-show/hide

[psmyrdek]

I've updated my app written in Angular 1.4.1 to Angular 1.5.8 and in some places some weird things started to happen.

Mostly it is about flickering of directives with ng-show / ng-hide used on them. I read here #13974 about similiar issue but I can't fix it with any solution posted there.

You can see the demo here - it's about that red indicators below each input:

More info - in these inputs I'm using typeahead directive from AngularUI Bootstrap. Typeahead popup template is being fetched from external file (not inlined).

[Narretz]

Looks similar to #14015 for which I wrote a pach, but never opened a PR :/

[psmyrdek]

Unfortunately I tried to use patch from this issue you've attached and no difference :/

And all of this looks similar to @garycuthbert comment:

another issue we were seeing with our directives, we use a lot of nested directives that use templateUrl and, with the latest angular release, we started to see some fairly ugly transient rendering on initial page loads & view transitions.

Same here :/

[gkalpak]

I wonder if this is also related to #15426 (comment). @psmyrdek, does it happen on a specific browser or not? Could you create a live reporduction (e.g. using CodePen, Plnkr etc)?

[psmyrdek]

It has been tested on Chrome, Safari and Firefox - the same problems on every mentioned browser.

@gkalpak your reply from #15426 looks promising (when speaking about solving this issue). I do have some places with ng-show initialized with falsy values (don't ask me why) and before migration to 1.5.8 it was working ok (at least from the user's perspective). Now there's a blink when ng-show="falsy value" turns into ng-hide.

Here's an example with blinking warning (refresh a few times to see it):
http://codepen.io/psmyrdek/pen/BQJQed

This issue propagates also to the sections of my app with more complex components / route changes (flickering during initialization of the view).

[gkalpak]

@psmyrdek, your demo shows something different: The flickering is caused by the element being shown before angular takes over and hides it. Issues such as this can be solved with ngClock (and the appropriate styles - if necessary).

Can you try the following directive and see if the flickering goes away in your route changes:

.directive('ngShow', function() {
  return function(scope, elem, attrs) {
    var doShow = scope.$eval(attrs.ngShow);
    elem[doShow ? 'removClass' : 'addClass']('ng-hide');
  };
})

[psmyrdek]

@psmyrdek, your demo shows something different: The flickering is caused by the element being shown before angular takes over and hides it

My question is why places like that worked well in 1.4.1 but now I see flickering.

Of course I agree that places with ng-show="falsy value" are vulnerable to this kind of issues, and I agree that there should be used ng-cloak with "css styles fallback" to prevent these problems, but as I said - in my case it wasn't possible to reproduce this issues in 1.4.1. Is newer Angular slower a bit in terms of initialization, or what?

This is just one of two - the second problem is still related to places with heavier route changes and posted workaround. My friend @jerry23 is also involved in this project and he can say something more about it..