Resolving iOS9 page transition issues with Ionic Framework Apps

November 18, 2015, 10:29 pm
Author: James Griffiths

If you've recently upgraded to iOS 9 you might find an issue with your Ionic Apps when testing/running on native devices.

We found that using the ui-router logic resulted in navigation issues where the requested page would 'flicker' or 'jerk' slightly into view before sliding back and then finally transitioning into full view.

Not a very pleasant user experience but thankfully the Angular team have rolled out a fix for this particular bug that we can implement in our Ionic Apps for now.

Download the recommended file, ensure this is called in your index.html file, after your Cordova (if you're using Cordova PhoneGap) and Ionic related scripts, like so (the path to the file is entirely your choice - as long as it matches the directory location where it is stored):

<script src="assets/js/plugins/angular-ios9-uiwebview.patch.js"></script>

Now in your app.js file be sure to include the ngIOS9UIWebViewPatch module as a dependency, after your Ionic/vendor modules, like so:

var NameOfApp = angular.module('NameOfApp', ['ionic', 'ngCordova', 'ngIOS9UIWebViewPatch', 'controller.js'])

Finally, wherever the ion-nav-view directive is contained in your app (normally in the body of the index.html file), ensure that this contains an animation attribute like so:

<ion-nav-view animation="slide-left-right"></ion-nav-view>

Or a class attribute instead:

<ion-nav-view class="slide-left-right"></ion-nav-view>

We found that either method worked for the ion-nav-view directive when testing the included ngIOS9UIWebViewPatch module.

With all of the following bases then covered:

  1. Include script call to angular-ios9-uiwebview.patch.js in your index.html file
  2. Declare ngIOS9UIWebViewPatch as a dependency in the app.js module declaration
  3. Use either an animation or class attribute on your ion-nav-view directives

You should see smooth page transitions for your Ionic Apps when testing/running on iOS9.


« Return to Posts

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.