Random thoughts & observations

From the mundane to the profound and everything in between here’s what’s rocking our world

Resolving iOS9 page transition issues with Ionic Framework Apps

Posted: November 18, 2015
Written by: Saints At Play
Category: Ionic Framework

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


There are no comments

Posting comments after three months has been disabled.