fix(router-outlet): css and change logic

core/src/components/app/app.scss

@@ -154,15 +154,16 @@ sub {
 // --------------------------------------------------
 
 ion-app,
+ion-router-outlet,
+ion-tab,
+ion-tabs,
+ion-nav,
 .ion-page {
   @include position(0);
 
   position: absolute;
   z-index: $z-index-page-container;
-  display: flex;
+  overflow: hidden;
-
-  flex-direction: column;
-  justify-content: space-between;
 
   width: 100%;
   height: 100%;
@@ -170,6 +171,14 @@ ion-app,
   contain: layout size style;
 }
 
+ion-app,
+.ion-page {
+  display: flex;
+
+  flex-direction: column;
+  justify-content: space-between;
+}
+
 .hide-page {
   opacity: 0;
 }

core/src/components/nav/nav.scss

@@ -1,14 +0,0 @@
-@import "../../themes/util";
-
-ion-nav {
-  @include position(0);
-
-  position: absolute;
-  z-index: $z-index-page-container;
-  overflow: hidden;
-
-  width: 100%;
-  height: 100%;
-
-  contain: layout size style;
-}

core/src/components/nav/nav.tsx

@@ -22,7 +22,6 @@ import mdTransitionAnimation from './animations/md.transition';
 
 @Component({
   tag: 'ion-nav',
-  styleUrl: 'nav.scss'
 })
 export class NavControllerBase implements NavOutlet {
 

core/src/components/router-outlet/route-outlet.tsx

@@ -15,6 +15,7 @@ export class RouterOutlet implements NavOutlet {
 
   private isTransitioning = false;
   private activeEl: HTMLElement = undefined;
+  private activeComponent: any;
 
   mode: string;
 
@@ -28,14 +29,16 @@ export class RouterOutlet implements NavOutlet {
   @Prop() delegate: FrameworkDelegate;
 
   componentDidUnload() {
-    this.activeEl = undefined;
+    this.activeEl = this.activeComponent = undefined;
   }
 
   @Method()
   async setRoot(component: HTMLElement|string, params?: {[key: string]: any}, opts?: RouterOutletOptions): Promise<boolean> {
-    if (this.isTransitioning) {
+    if (this.isTransitioning || this.activeComponent === component) {
       return false;
     }
+    this.activeComponent = component;
+
     // attach entering view to DOM
     const enteringEl = await attachComponent(this.delegate, this.el, component, ['ion-page', 'hide-page'], params);
     const leavingEl = this.activeEl;

core/src/components/tab/tab.scss

@@ -1,10 +0,0 @@
-@import "../../themes/ionic.globals";
-
-ion-tab {
-  @include position(0, null, null, 0);
-
-  position: absolute;
-
-  width: 100%;
-  height: 100%;
-}

core/src/components/tab/tab.tsx

@@ -1,8 +1,7 @@
 import { Build, Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
 @Component({
-  tag: 'ion-tab',
+  tag: 'ion-tab'
-  styleUrl: 'tab.scss'
 })
 export class Tab {