Weird flickering on simple animation on iOS with IonicFramework - ios

Question

I'm getting familiar with IonicFramework and building really simple app.
For now it has one button revealing panel (fading in, was experimenting with sliding in from the bottom too). It works fine on Androids but on iOS animation has strange flickering at the beginning (on both emulator and device).
Basically my view looks as follows:
<ion-content class="has-header" ng-controller="MainCtrl">
<div class="container">
<button class="btn btn__big centered primary" ng-click="toggleDetails()">toggle info</button>
</div>
<div class="panel panel-animated primary ng-hide" ng-show="detailsVisible">
Details here
</div>
</ion-content>
And css classes with animations I apply to ng-show
.panel {
position: absolute;
width: 100%;
height: 40%;
top: 60%;
padding: 1em;
}
.panel-animated {
-webkit-animation: fadeIn 0.5s;
-moz-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.panel-animated.ng-hide {
-webkit-animation: fadeOut 0.5s;
-moz-animation: fadeOut 0.5s;
animation: fadeOut 0.5s;
}
I'm not using any external libs to animate, just plain Ionic built-in animation classes.
I created repository with complete, ready to run application so you may want to check it.
Also video showing flickering but as flash videos are crap there is only one recorded while there were many more of them actually video here

Answer 1

Ionic keyframe animations fadeIn and fadeOut use opacity
ng-hide makes an element invisible with display: none !important;. Adding/removing ng-hide class causes repaint to happen.
Ionic uses Angular ngAnimate. In your style.css you have:
.panel-animated {
-webkit-animation: fadeIn 0.5s;
-moz-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.panel-animated.ng-hide {
-webkit-animation: fadeOut 0.5s;
-moz-animation: fadeOut 0.5s;
animation: fadeOut 0.5s;
}
I tried running it on a pretty decent nvidia graphics and it caused a peak on the rendering graph in Chrome.
After changing the styles according to the docs on ngShow aniations
.panel-animated.ng-hide-remove {
-webkit-animation: fadeIn 0.5s;
-moz-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.panel-animated.ng-hide-add {
-webkit-animation: fadeOut 0.5s;
-moz-animation: fadeOut 0.5s;
animation: fadeOut 0.5s;
}
it causes no such peak:
It's because .ng-hide-add is applied after the element is rendered and only then animation is applied. Junk removed.

Answer 2

Check the https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode. Probably iOS set wrong opacity value on the first frame.