Weird flickering on Ionic app, running on iOS 9

Question

I've created an app for Android and iOS using Phonegap and Ionic Framework, the goes perfectly on Android but it has an issue on iOS specially with the iPhone 5 and the iPad (It works well on iPhone 6 and 4).

When you tap a button that makes the rol of a backbutton, the back animation is shown but inmediatly the goes back to the section where the backbutton was taped. It only happens on one section, the backbutton works perfectly on the others sections.

The HTML element is the following:

<a class="button button-icon button-positive button-positive icon ion-arrow-left-c" ng-click="atras()">

The function called is "atras" which is the following (Located in the controller of the template):

 $scope.atras = function() {
        $ionicHistory.goBack();
 };

Have any idea of how could i resolve this? Thanks a lot for your answers!

Answer 1

Specifically, there is a notable patch for Ionic UIWebView that are built on iOS9. Without this patch, you will experience such flickering issue when you tap on some back buttons in navigation bar. Please apply ngIOS9UIWebViewPatch for your project then it's all done.

https://gist.github.com/IgorMinar/863acd413e3925bf282c

http://blog.ionic.io/ios-9-potential-breaking-change/

Answer 2

Unfortunately iOS 9 has some bugs with with window.location that impact the router-ui and also some empty href links <a href="#"> like yours.

Take a look to these articles from Ionic's blog:

• Preparing for iOS 9
• iOS 9 Potential Breaking Change

There you can find the link to the iOS9 patch for angular and this for Disable App Transport Security in iOS 9

Answer 3

Add these two properties to prevent flickering effects:

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

Apply also to flickering elements which AREN'T being animated for the same fix.