fix flash on ios

src/css/mobile.css

@@ -406,17 +406,19 @@ to prevent collapsing during animation*/
   right: 0;
 
   animation-timing-function: linear;
-  animation-duration: 10s;
+  animation-duration: .3s;
   animation-iteration-count: 1;
   animation-fill-mode: both;
   
   -webkit-animation-timing-function: linear;
-  -webkit-animation-duration: 10s;
+  -webkit-animation-duration: .3s;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-fill-mode: both;
 }
 
 .CslideInUp {
+  transform: translate3d(0, 100%, 0);
+  -webkit-transform: translate3d(0, 100%, 0);
   -webkit-animation-name: slideInUp;
   animation-name: slideInUp;
   z-index: 1003;
@@ -432,6 +434,8 @@ to prevent collapsing during animation*/
   z-index: 1003;
 }
 .CslideInRight {
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
   -webkit-animation-name: slideInRight;
   animation-name: slideInRight;
   z-index: 1003;

src/js/routes.js

@@ -381,7 +381,7 @@ angular
     };
 
 
-    var transitionReady;
+    var cachedTransitionState, cachedBackPanel;
 
     $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
 
@@ -417,42 +417,51 @@ angular
        * --------------------
        */
 
-      function cleanUpLater (e, e2) {
+      function cleanUpLater(e, e2) {
-        var cleanedUp = false;
+        var cleanedUp = false, timeoutID;
         var cleanUp = function() {
           if (cleanedUp) return;
+console.log('[routes.js.423:cleanedUp:]',cleanedUp); //TODO
           cleanedUp = true;
           e2.parentNode.removeChild(e2);
           e2.innerHTML = "";
           e.className = '';
+          cachedBackPanel = null;
+          cachedTransitionState = '';
+          if (timeoutID) {
+            timeoutID=null;
+            window.clearTimeout(timeoutID);
+          }
         };
         e.addEventListener("animationend", cleanUp, true);
         e2.addEventListener("animationend", cleanUp, true);
         e.addEventListener("webkitAnimationEnd", cleanUp, true);
         e2.addEventListener("webkitAnimationEnd", cleanUp, true);
-        setTimeout(cleanUp, 11000);
+        // TODO
+        timeoutID = setTimeout(cleanUp, 500);
       };
 
       function animateTransition(fromState, toState, event) {
 
         // Animation in progress?
         var x = document.getElementById('mainSectionDup');
-        if (x) {
+        if (x && !cachedTransitionState) {
           console.log('Anim in progress');
-          event.preventDefault();
+          return true;
-          return;
         }
 
         var fromName = fromState.name;
         var toName = toState.name;
-console.log('[routes.js.446:fromName:]',fromName, toName); //TODO
+        console.log('[routes.js.446:from/toName:]', fromName, toName); //TODO
+        if (!fromName || !toName) 
+          return true;
 
         var fromWeight = pageWeight[fromName];
         var toWeight = pageWeight[toName];
 
-console.log('[routes.js.446:fromName:]',fromWeight, toWeight); //TODO
 
-        var entering = null, leaving = null;
+        var entering = null,
+          leaving = null;
 
         if (fromWeight && toWeight) {
           if (fromWeight > toWeight) {
@@ -461,27 +470,43 @@ console.log('[routes.js.446:fromName:]',fromWeight, toWeight); //TODO
             entering = 'CslideInRight';
           }
         } else if (fromName && fromWeight >= 0 && toWeight >= 0) {
-          if (toName) {
+          if (toWeight) {
             entering = 'CslideInUp';
           } else {
             leaving = 'CslideOutDown';
           }
         }
 
-console.log('[routes.js.467]', entering, leaving); //TODO
+        console.log('[routes.js.467]', entering, leaving); //TODO
-
         var e = document.getElementById('mainSection');
 
-        var e2 = e.cloneNode(true);
-        var c = document.getElementById('sectionContainer');
-        e2.id = 'mainSectionDup';
 
+        var desiredTransitionState = (fromName || '-') + ':' + (toName || '-');
 
-        c.appendChild(e2);
+        if (desiredTransitionState == cachedTransitionState) {
-        e.className = entering || '';
+          e.className = entering || '';
-        e2.className = leaving || '';
+          cachedBackPanel.className = leaving || '';
-        cleanUpLater(e,e2);
+          cleanUpLater(e, cachedBackPanel);
+          console.log('USing', cachedTransitionState); //TODO
+          return true;
+        } else {
+          cachedBackPanel = e.cloneNode(true);
+          cachedBackPanel.id = 'mainSectionDup';
+          var c = document.getElementById('sectionContainer');
+          c.appendChild(cachedBackPanel);
+
+          cachedTransitionState = desiredTransitionState;
+          console.log('CACHing', cachedTransitionState); //TODO
+          return false;
+        }
+      }
+
+      if (!animateTransition(fromState, toState)) {
+        event.preventDefault();
+        // Time for the backpane to render
+        setTimeout(function() {
+          $state.transitionTo(toState);
+        }, 50);
       }
-      animateTransition(fromState, toState, event);
     });
   });