fix(transitions): prevent black flicker

ionic/components/content/modes/ios.scss

@@ -9,6 +9,7 @@ $outer-content-md-background-color:         #efeff4 !default;
   background: $outer-content-md-background-color;
 }
 
-ion-nav.has-views {
+ion-nav.has-views,
+ion-tab.has-views {
   background: #000;
 }

ionic/components/nav/nav-controller.ts

@@ -1,4 +1,4 @@
-import {Compiler, ElementRef, Injector, provide, NgZone, DynamicComponentLoader, AppViewManager} from 'angular2/angular2';
+import {Compiler, ElementRef, Injector, provide, NgZone, DynamicComponentLoader, AppViewManager, Renderer} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {makeComponent} from '../../config/decorators';
@@ -110,7 +110,8 @@ export class NavController extends Ion {
     compiler: Compiler,
     loader: DynamicComponentLoader,
     viewManager: AppViewManager,
-    zone: NgZone
+    zone: NgZone,
+    renderer: Renderer
   ) {
     super(elementRef, config);
 
@@ -122,6 +123,7 @@ export class NavController extends Ion {
     this._loader = loader;
     this._viewManager = viewManager;
     this._zone = zone;
+    this.renderer = renderer;
 
     this._views = [];
 
@@ -180,6 +182,10 @@ export class NavController extends Ion {
     // add the view to the stack
     this._add(enteringView);
 
+    raf(() => {
+      this._cleanup(enteringView);
+    });
+
     if (this.router) {
       // notify router of the state change
       this.router.stateChange('push', enteringView, params);
@@ -755,11 +761,11 @@ export class NavController extends Ion {
     });
   }
 
-  _cleanup() {
+  _cleanup(activeView) {
     // the active view, and the previous view, should be rendered in dom and ready to go
     // all others, like a cached page 2 back, should be display: none and not rendered
     let destroys = [];
-    let activeView = this.getActive();
+    activeView = activeView || this.getActive();
     let previousView = this.getPrevious(activeView);
 
     this._views.forEach(view => {
@@ -783,6 +789,16 @@ export class NavController extends Ion {
     });
   }
 
+  addHasViews() {
+    if (this._views.length === 1) {
+      this._zone.runOutsideAngular(() => {
+        setTimeout(() => {
+          this.renderer.setElementClass(this.elementRef, 'has-views', true);
+        }, 200);
+      });
+    }
+  }
+
   /**
    * TODO
    * @param {TODO} nbContainer  TODO

ionic/components/nav/nav.ts

@@ -150,9 +150,10 @@ export class Nav extends NavController {
     compiler: Compiler,
     loader: DynamicComponentLoader,
     viewManager: AppViewManager,
-    zone: NgZone
+    zone: NgZone,
+    renderer: Renderer
   ) {
-    super(hostNavCtrl, app, config, elementRef, compiler, loader, viewManager, zone);
+    super(hostNavCtrl, app, config, elementRef, compiler, loader, viewManager, zone, renderer);
     this.panes = [];
   }
 
@@ -253,13 +254,7 @@ export class Nav extends NavController {
             });
           }
 
-          if (this._views.length === 1) {
-            this._zone.runOutsideAngular(() => {
-              // setTimeout(function() {
-              //   componentRef && componentRef.location && componentRef.location.nativeElement.classList.add('has-views');
-              // }, 100);
-            });
-          }
+          this.addHasViews();
 
           done();
         });

ionic/components/tabs/tab.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, forwardRef, NgZone} from 'angular2/angular2';
+import {Component, Directive, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, forwardRef, NgZone, Renderer} from 'angular2/angular2';
 
 import {IonicApp} from '../app/app';
 import {IonicConfig} from '../../config/config';
@@ -77,10 +77,11 @@ export class Tab extends NavController {
     compiler: Compiler,
     loader: DynamicComponentLoader,
     viewManager: AppViewManager,
-    zone: NgZone
+    zone: NgZone,
+    renderer: Renderer
   ) {
     // A Tab is a NavController for its child pages
-    super(tabs, app, config, elementRef, compiler, loader, viewManager, zone);
+    super(tabs, app, config, elementRef, compiler, loader, viewManager, zone, renderer);
     this.tabs = tabs;
 
     this._isInitial = tabs.add(this);
@@ -144,8 +145,9 @@ export class Tab extends NavController {
         });
       }
 
-      done();
+      this.addHasViews();
 
+      done();
     });
 
   }