fix(zIndex): ion-page dynamic zIndex

ionic/components/action-sheet/action-sheet.ts

@@ -76,6 +76,9 @@ import * as util from 'ionic/util';
         '</div>' +
       '</div>' +
     '</action-sheet-wrapper>',
+  host: {
+    '[style.zIndex]': '_zIndex'
+  },
   directives: [NgFor, NgIf, Icon]
 })
 class ActionSheetCmp {

ionic/components/app/structure.scss

@@ -88,6 +88,7 @@ ion-tabs {
   left: 0;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 
 ion-navbar-section {

ionic/components/nav/nav-controller.ts

@@ -459,6 +459,8 @@ export class NavController extends Ion {
         return callback();
       }
 
+      this._setZIndex(enteringView.instance, leavingView.instance, opts.direction);
+
       this._zone.runOutsideAngular(() => {
 
         enteringView.shouldDestroy = false;
@@ -560,6 +562,20 @@ export class NavController extends Ion {
     });
   }
 
+  _setZIndex(enteringInstance, leavingInstance, direction) {
+    if (!leavingInstance) {
+      enteringInstance._zIndex = 0;
+
+    } else if (direction === 'back') {
+      // moving back
+      enteringInstance._zIndex = leavingInstance._zIndex - 1;
+
+    } else {
+      // moving forward
+      enteringInstance._zIndex = leavingInstance._zIndex + 1;
+    }
+  }
+
   /**
    * @private
    * TODO

ionic/components/nav/test/nav-controller.spec.ts

@@ -250,5 +250,27 @@ export function run() {
       });
     });
 
+    describe("_setZIndex", () => {
+      it('should set zIndex 0 on first entering view', () => {
+        let enteringInstance = {};
+        nav._setZIndex(enteringInstance, null, 'forward');
+        expect(enteringInstance._zIndex).toEqual(0);
+      });
+
+      it('should set zIndex 1 on second entering view', () => {
+        let leavingInstance = { _zIndex: 0 };
+        let enteringInstance = {};
+        nav._setZIndex(enteringInstance, leavingInstance, 'forward');
+        expect(enteringInstance._zIndex).toEqual(1);
+      });
+
+      it('should set zIndex 0 on entering view going back', () => {
+        let leavingInstance = { _zIndex: 1 };
+        let enteringInstance = {};
+        nav._setZIndex(enteringInstance, leavingInstance, 'back');
+        expect(enteringInstance._zIndex).toEqual(0);
+      });
+    });
+
   });
 }

ionic/components/overlay/overlay-controller.ts

@@ -33,13 +33,12 @@ export class OverlayController {
           return reject();
         }
 
-        ref._z = ROOT_Z_INDEX;
+        instance._zIndex = ROOT_Z_INDEX;
         for (let i = 0; i < this.refs.length; i++) {
-          if (this.refs[i]._z >= ref._z) {
-            ref._z = this.refs[i]._z + 1;
+          if (this.refs[i].instance._zIndex >= ref.instance._zIndex) {
+            ref.instance._zIndex = this.refs[i].instance._zIndex + 1;
           }
         }
-        this.renderer.setElementStyle(ref.location, 'zIndex', ref._z);
         this.renderer.setElementAttribute(ref.location, 'role', 'dialog');
 
         util.extend(instance, opts);

ionic/components/popup/popup.ts

@@ -283,6 +283,9 @@ const OVERLAY_TYPE = 'popup';
         '<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" [inner-html]="button.text"></button>' +
       '</div>' +
   '</popup-wrapper>',
+  host: {
+    '[style.zIndex]': '_zIndex'
+  },
   directives: [FORM_DIRECTIVES, NgClass, NgIf, NgFor, Button]
 })
 

ionic/config/decorators.ts

@@ -70,6 +70,7 @@ export function Page(config={}) {
     config.host = config.host || {};
     config.host['[hidden]'] = '_hidden';
     config.host['[class.tab-subpage]'] = '_tabSubPage';
+    config.host['[style.zIndex]'] = '_zIndex';
     var annotations = Reflect.getMetadata('annotations', cls) || [];
     annotations.push(new Component(config));
     Reflect.defineMetadata('annotations', annotations, cls);

ionic/transitions/md-transition.ts

@@ -39,13 +39,14 @@ class MDTransition extends Animation {
         .fadeIn();
     }
 
-    let enteringBackButton = new Animation(enteringView.backBtnRef());
-    this.add(enteringBackButton);
-    if (enteringHasNavbar && enteringView.enableBack()) {
-      enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS);
-      
-    } else {
-      enteringBackButton.before.removeClass(SHOW_BACK_BTN_CSS);
+    if (enteringHasNavbar) {
+      let enteringBackButton = new Animation(enteringView.backBtnRef());
+      this.add(enteringBackButton);
+      if (enteringView.enableBack()) {
+        enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS);
+      } else {
+        enteringBackButton.before.removeClass(SHOW_BACK_BTN_CSS);
+      }  
     }
 
     // setup leaving view

scripts/e2e/e2e.template.html

@@ -30,7 +30,6 @@
       -webkit-transition-duration: 0ms !important;
       transition-duration: 0ms !important;
     }
-    .snapshot ion-loading-icon,
     .snapshot md-ripple {
       display: none !important;
     }

scripts/snapshot/snapshot.config.js

@@ -11,7 +11,7 @@ exports.config = {
   specs: 'dist/e2e/**/*e2e.js',
   //specs: 'dist/e2e/search-bar/**/*e2e.js',
 
-  sleepBetweenSpecs: 250,
+  sleepBetweenSpecs: 300,
 
   platformDefauls: {
     browser: 'chrome',