Ionic Transition Glitch in iOS 9 - ionic-framework

Question

I'm encountering some transition glitch w/ my App, it only appears in iOS 9 and the app is compiled through Phonegap build.
Here's a sample video showing the transition glitch. link
I don't know if this would help but here's my gist for the config
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="au.gov.nal.hearing.myhearing" version="0.7.9" versionCode="607" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:gap="http://phonegap.com/ns/1.0">
<gap:platform name="ios"/>
<gap:platform name="android"/>
<name>My Hearing</name>
<description>My Hearing App</description>
<author email="rene#bywave.com.au" href="http://bywave.com.au/">Renemari Padillo</author>
<content src="index.html"/>
<preference name="AutoHideSplashScreen" value="true"/>
<preference name="SplashScreenDelay" value="5000"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="FadeSplashScreen" value="true"/>
<preference name="FadeSplashScreenDuration" value="1.0"/>
<preference name="SplashScreen" value="screen"/>
<preference name="detect-data-types" value="true" />
<preference name="target-device" value="handset" />
<feature name="http://api.phonegap.com/1.0/notification" />
<feature name="http://api.phonegap.com/1.0/geolocation" />
<feature name="http://api.phonegap.com/1.0/network"/>
<!-- Whitelist URLs -->
<access origin="*" />
<access origin="*.google.com" />
<access origin="*.parse.com" />
<access origin="*.googleapis.com" />
<access origin="*.gstatic.com" />
<access origin="*.googleusercontent.com" />
<access origin="google.com" subdomains="true"/>
<access origin="googleapis.com" subdomains="true"/>
<access origin="gstatic.com" subdomains="true"/>
<access origin="googleusercontent.com" subdomains="true"/>
<access origin="parse.com" subdomains="true"/>
<allow-navigation href="*" />
<allow-intent href="tel:*" launch-external="yes" />
<allow-intent href="geo:*" launch-external="yes" />
<allow-intent href="*" launch-external="yes" />
<feature name="Device">
<param name="android-package" value="org.apache.cordova.device.Device" />
<param name="ios-package" value="CDVDevice" />
</feature>
<feature name="debug-server" required="true">
<param name="domain" value="http://192.168.15.130:8080"/>
<param name="key" value="key1"/>
</feature>
<feature name="Geolocation">
<param name="android-package" value="org.apache.cordova.GeoBroker"/>
<param name="ios-package" value="CDVLocation"/>
</feature>
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser"/>
<param name="android-package" value="org.apache.cordova.InAppBrowser"/>
</feature>
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.SplashScreen"/>
<param name="ios-package" value="CDVSplashScreen"/>
</feature>
<gap:plugin name="com.ionic.keyboard" version="1.0.3"/>
<gap:plugin name="uk.co.whiteoctober.cordova.appversion" version="0.1.4"/>
<gap:plugin name="org.apache.cordova.splashscreen" version="0.3.4"/>
<gap:plugin name="cordova-plugin-inappbrowser" source="npm"/>
<gap:plugin name="cordova-plugin-whitelist" source="npm"/>
<gap:plugin name="org.apache.cordova.core.geolocation" version="0.3.10"/>
<gap:plugin name="com.medlei.pushplugin" version="0.1.2">
<param name="APP_ID" value="Bd8dbfMRwToBaB8UP0SWZ0ZlgYJ2o1CqMtFqzkuh"/>
<param name="CLIENT_KEY" value="0ev2Je3JX3ln5XJHTsFTbJwNpG7k5eXpt5l83CVs"/>
</gap:plugin>
<icon src="resources/icon.png" />
<gap:splash src="resources/splash.png" />
<icon gap:platform="android" src="resources/android/icon/drawable-ldpi-icon.png" gap:density="ldpi"/>
<icon gap:platform="android" src="resources/android/icon/drawable-mdpi-icon.png" gap:density="mdpi"/>
<icon gap:platform="android" src="resources/android/icon/drawable-hdpi-icon.png" gap:density="hdpi"/>
<icon gap:platform="android" src="resources/android/icon/drawable-xhdpi-icon.png" gap:density="xhdpi"/>
<icon gap:platform="android" src="resources/android/icon/drawable-xxhdpi-icon.png" gap:density="xxhdpi"/>
<icon gap:platform="android" src="resources/android/icon/drawable-xxxhdpi-icon.png" gap:density="xxxhdpi"/>
<gap:splash gap:platform="android" src="resources/android/splash/drawable-land-ldpi-screen.png" gap:qualifier="land-ldpi"/>
<gap:splash gap:platform="android" src="resources/android/splash/drawable-land-mdpi-screen.png" gap:qualifier="land-mdpi"/>
<gap:splash gap:platform="android" src="resources/android/splash/drawable-land-hdpi-screen.png" gap:qualifier="land-hdpi"/>
<gap:splash gap:platform="android" src="resources/android/splash/drawable-land-xhdpi-screen.png" gap:qualifier="land-xhdpi"/>
<gap:splash gap:platform="android" src="resources/android/splash/drawable-land-xxhdpi-screen.png" gap:qualifier="land-xxhdpi"/>
<gap:splash gap:platform="android" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" gap:qualifier="land-xxxhdpi"/>
<gap:splash gap:platform="android" src="resources/android/splash/drawable-port-ldpi-screen.png" gap:qualifier="port-ldpi"/>
<gap:splash gap:platform="android" src="resources/android/splash/drawable-port-mdpi-screen.png" gap:qualifier="port-mdpi"/>
<gap:splash gap:platform="android" src="resources/android/splash/drawable-port-hdpi-screen.png" gap:qualifier="port-hdpi"/>
<gap:splash gap:platform="android" src="resources/android/splash/drawable-port-xhdpi-screen.png" gap:qualifier="port-xhdpi"/>
<gap:splash gap:platform="android" src="resources/android/splash/drawable-port-xxhdpi-screen.png" gap:qualifier="port-xxhdpi"/>
<gap:splash gap:platform="android" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" gap:qualifier="port-xxxhdpi"/>
<icon gap:platform="ios" src="resources/ios/icon/icon.png" width="57" height="57"/>
<icon gap:platform="ios" src="resources/ios/icon/icon#2x.png" width="114" height="114"/>
<icon gap:platform="ios" src="resources/ios/icon/icon-40.png" width="40" height="40"/>
<icon gap:platform="ios" src="resources/ios/icon/icon-40#2x.png" width="80" height="80"/>
<icon gap:platform="ios" src="resources/ios/icon/icon-50.png" width="50" height="50"/>
<icon gap:platform="ios" src="resources/ios/icon/icon-50#2x.png" width="100" height="100"/>
<icon gap:platform="ios" src="resources/ios/icon/icon-60.png" width="60" height="60"/>
<icon gap:platform="ios" src="resources/ios/icon/icon-60#2x.png" width="120" height="120"/>
<icon gap:platform="ios" src="resources/ios/icon/icon-60#3x.png" width="180" height="180"/>
<icon gap:platform="ios" src="resources/ios/icon/icon-72.png" width="72" height="72"/>
<icon gap:platform="ios" src="resources/ios/icon/icon-72#2x.png" width="144" height="144"/>
<icon gap:platform="ios" src="resources/ios/icon/icon-76.png" width="76" height="76"/>
<icon gap:platform="ios" src="resources/ios/icon/icon-76#2x.png" width="152" height="152"/>
<icon gap:platform="ios" src="resources/ios/icon/icon-small.png" width="29" height="29"/>
<icon gap:platform="ios" src="resources/ios/icon/icon-small#2x.png" width="58" height="58"/>
<icon gap:platform="ios" src="resources/ios/icon/icon-small#3x.png" width="87" height="87"/>
<gap:splash gap:platform="ios" src="resources/ios/splash/Default-568h#2x~iphone.png" height="1136" width="640"/>
<gap:splash gap:platform="ios" src="resources/ios/splash/Default-667h#2x.png" height="1334" width="750"/>
<gap:splash gap:platform="ios" src="resources/ios/splash/Default-736h.png" height="2208" width="1242"/>
<gap:splash gap:platform="ios" src="resources/ios/splash/Default-Landscape-736h.png" height="1242" width="2208"/>
<gap:splash gap:platform="ios" src="resources/ios/splash/Default-Portrait-736h#3x.png" width="1242" height="2208"/>
<gap:splash gap:platform="ios" src="resources/ios/splash/Default-Landscape-736h#3x.png" width="2208" height="1242"/>
<gap:splash gap:platform="ios" src="resources/ios/splash/Default-Landscape#2x~ipad.png" height="1536" width="2048"/>
<gap:splash gap:platform="ios" src="resources/ios/splash/Default-Landscape~ipad.png" height="768" width="1024"/>
<gap:splash gap:platform="ios" src="resources/ios/splash/Default-Portrait#2x~ipad.png" height="2048" width="1536"/>
<gap:splash gap:platform="ios" src="resources/ios/splash/Default-Portrait~ipad.png" height="1024" width="768"/>
<gap:splash gap:platform="ios" src="resources/ios/splash/Default#2x~iphone.png" height="960" width="640"/>
<gap:splash gap:platform="ios" src="resources/ios/splash/Default~iphone.png" height="480" width="320"/>
</widget>
I've found some related articles, but it doesn't sovle my problem.
iOS version - 9.0.1
Does anyone also encountered this issue? Thanks

Answer 1

Here's a temporary patch fix for this issue:
https://gist.github.com/IgorMinar/863acd413e3925bf282c
/**
* ================== angular-ios9-uiwebview.patch.js v1.1.1 ==================
*
* This patch works around iOS9 UIWebView regression that causes infinite digest
* errors in Angular.
*
* The patch can be applied to Angular 1.2.0 – 1.4.5. Newer versions of Angular
* have the workaround baked in.
*
* To apply this patch load/bundle this file with your application and add a
* dependency on the "ngIOS9UIWebViewPatch" module to your main app module.
*
* For example:
*
* ```
* angular.module('myApp', ['ngRoute'])`
* ```
*
* becomes
*
* ```
* angular.module('myApp', ['ngRoute', 'ngIOS9UIWebViewPatch'])
* ```
*
*
* More info:
* - https://openradar.appspot.com/22186109
* - https://github.com/angular/angular.js/issues/12241
* - https://github.com/driftyco/ionic/issues/4082
*
*
* #license AngularJS
* (c) 2010-2015 Google, Inc. http://angularjs.org
* License: MIT
*/
angular.module('ngIOS9UIWebViewPatch', ['ng']).config(['$provide', function($provide) {
'use strict';
$provide.decorator('$browser', ['$delegate', '$window', function($delegate, $window) {
if (isIOS9UIWebView($window.navigator.userAgent)) {
return applyIOS9Shim($delegate);
}
return $delegate;
function isIOS9UIWebView(userAgent) {
return /(iPhone|iPad|iPod).* OS 9_\d/.test(userAgent) && !/Version\/9\./.test(userAgent);
}
function applyIOS9Shim(browser) {
var pendingLocationUrl = null;
var originalUrlFn= browser.url;
browser.url = function() {
if (arguments.length) {
pendingLocationUrl = arguments[0];
return originalUrlFn.apply(browser, arguments);
}
return pendingLocationUrl || originalUrlFn.apply(browser, arguments);
};
window.addEventListener('popstate', clearPendingLocationUrl, false);
window.addEventListener('hashchange', clearPendingLocationUrl, false);
function clearPendingLocationUrl() {
pendingLocationUrl = null;
}
return browser;
}
}]);
}]);

Answer 2

In the version of 1.1.1 this bug is fixed:
Check out CHANGELOG.md and related commit: #e5b85df on Github.