Collapse flickers at page load in 0.13.0

[arn80]

In 0.12.1 'collapse' works well, but in 0.13.0 the element 'flickers' at page load when I set an initial $scope.collapse = true; as the first line in my controller.

The 'collapsed' content just pops into view in a fast moment just after page load. It is very obvious on pages, were a lot of elements are collapsed at page load.
It happens the most in Chrome and Firefox, but IE seems to handle it better !?!

I have made a Plunker with the issue.

Try to Run / Stop the Plunker a few times, because the issue is not as obvious in all cases.

[pcnate]

I couldn't get the plunker to show the issue by changing $scope.collapse = true; to $scope.collapse = false;. There seems to be enough of a delay in loading/rendering to mask the issue.

[arn80]

I have changed the background color of the collapsed element to red. This should make the issue more visible.

Sometimes i have to Run / Stop the plunker up to ten times, before the issue appears. But it will eventually.

[arn80]

I have made a new Plunker

Now I use a ngIf on the parent element, and a timeout that makes it appear 500 ms, after page load. This should highlight the issue even more. Again, you have to Run / Stop the plunker a few times.

[RobJacobs]

Seems to be related to this commit where collapse was refactored to use ngAnimate. I believe the issue is with this line where the height for the collapse animation gets set to the element height. If the element is collapsed initially, it still calls the collapse function and runs the animation.

[wesleycho]

Thanks for this investigation @arn80 - I have a proposed fix in the referenced PR above, please take a look and let me know if there are any issues there.

[arn80]

Yes, that seems to have fixed it. Great work, that was fast :-). Thanks @wesleycho.

[mseancole]

@wesleycho I still get flickering when I tried this.

I set some breakpoints in the watch and discovered that this might be caused by the collapsing class being added when the directive is initially run. I fixed it by adding a check at the beginning of the collapse() function to verify the element had either the collapse or in class before allowing it to proceed.

[visiblesoft-es]

Hi, in latest version 2.5.0, when load page if uib-collapse is true the flickering problem appears again.