diff --git a/ionic/animations/animation.js b/ionic/animations/animation.js
index 948e7ffc82..a397103d48 100644
--- a/ionic/animations/animation.js
+++ b/ionic/animations/animation.js
@@ -1,6 +1,6 @@
 import {CSS} from '../util/dom';
 
-
+const RENDER_DELAY = 36;
 let AnimationRegistry = {};
 
 export class Animation {
@@ -190,12 +190,10 @@ export class Animation {
         });
       }
 
-      if (this._duration > 36) {
+      if (this._duration > RENDER_DELAY) {
         // begin each animation when everything is rendered in their starting point
         // give the browser some time to render everything in place before starting
-        setTimeout(() => {
-          kickoff();
-        }, 36);
+        setTimeout(kickoff, RENDER_DELAY);
 
       } else {
         // no need to render everything in there place before animating in
@@ -371,7 +369,7 @@ class Animate {
 
     self.toEffect = parseEffect(toEffect);
 
-    self.shouldAnimate = (duration > 36);
+    self.shouldAnimate = (duration > RENDER_DELAY);
 
     if (!self.shouldAnimate) {
       return inlineStyle(ele, self.toEffect);
diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss
index 8885e74303..4c09824222 100644
--- a/ionic/components/app/structure.scss
+++ b/ionic/components/app/structure.scss
@@ -30,8 +30,6 @@ body {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-
-  -webkit-backface-visibility: hidden;
 }
 
 ion-app {
@@ -62,8 +60,6 @@ ion-pane {
 
   display: flex;
   flex-direction: column;
-
-  transform: translateZ(0px);
 }
 
 .nav-item {
@@ -84,21 +80,6 @@ ion-pane {
   flex: 1;
 }
 
-ion-navbar {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  min-height: 4.4rem;
-  order: $flex-order-toolbar-top;
-
-  transform: translateZ(0px);
-
-  display: none;
-  &.show-navbar {
-    display: flex;
-  }
-}
-
 ion-toolbar {
   display: flex;
   min-height: 4.4rem;
@@ -123,17 +104,3 @@ ion-content {
   -webkit-overflow-scrolling: touch;
   will-change: scroll-position;
 }
-
-
-// Hardware Acceleration
-.transitioning {
-
-  .nav-item,
-  ion-navbar,
-  .back-button,
-  .navbar-title,
-  .navbar-item {
-    will-change: transform, opacity;
-  }
-
-}
diff --git a/ionic/components/app/z-index.scss b/ionic/components/app/z-index.scss
index aebcd9e49d..48440419b5 100644
--- a/ionic/components/app/z-index.scss
+++ b/ionic/components/app/z-index.scss
@@ -5,7 +5,6 @@
 
 $z-index-content:                1 !default;
 $z-index-swipe-handle:           5 !default;
-$z-index-button:                 10 !default;
 $z-index-toolbar-border:         20 !default;
 $z-index-list-border:            50 !default;
 $z-index-aside-overlay:          80 !default;
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index a4e30477aa..fbfcd47d14 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -25,14 +25,11 @@ $button-small-icon-size:          2.1rem !default;
 // --------------------------------------------------
 
 .button {
-  position: relative;
-
   display: inline-flex;
   flex-shrink: 0;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: center;
-  z-index: $z-index-button;
 
   margin: $button-margin;
   line-height: 1;
@@ -52,16 +49,6 @@ $button-small-icon-size:          2.1rem !default;
 
   cursor: pointer;
   user-select: none;
-
-  &:after {
-    // used to create a larger button "hit" area
-    position: absolute;
-    top: -6px;
-    right: -6px;
-    bottom: -6px;
-    left: -6px;
-    content: ' ';
-  }
 }
 
 
diff --git a/ionic/components/nav-bar/nav-bar.scss b/ionic/components/nav-bar/nav-bar.scss
index 60247a8cdd..b14f66ffe9 100644
--- a/ionic/components/nav-bar/nav-bar.scss
+++ b/ionic/components/nav-bar/nav-bar.scss
@@ -11,9 +11,21 @@ $navbar-order: (
 
 
 ion-navbar {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  min-height: 4.4rem;
+
+  display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  order: $flex-order-toolbar-top;
+
+  transform: translate3d(0px, -9999px, 0px);
+  &.show-navbar {
+    transform: translate3d(0px, 0px, 0px);
+  }
 }
 
 .navbar-inner {
@@ -31,6 +43,11 @@ ion-navbar {
   }
 }
 
+.back-button-text {
+  display: flex;
+  align-items: center;
+}
+
 .navbar-title {
   flex: 1;
   order: map-get($navbar-order, 'title');
@@ -55,11 +72,6 @@ ion-title {
 
 .navbar-item {
   transform: translateZ(0px);
-
-  display: none;
-  &.show-navbar-item {
-    display: block;
-  }
 }
 
 .navbar-primary-item {
diff --git a/ionic/components/nav/pane.js b/ionic/components/nav/pane.js
index ede79a7e19..b8b3d53de8 100644
--- a/ionic/components/nav/pane.js
+++ b/ionic/components/nav/pane.js
@@ -115,10 +115,6 @@ export class Pane {
     return this.domElement.offsetWidth;
   }
 
-  isTransitioning(val) {
-    this.domElement.classList[val ? 'add' : 'remove']('transitioning');
-  }
-
   showPane(val) {
     this.domElement.classList[val ? 'add' : 'remove']('show-pane');
   }
diff --git a/ionic/components/nav/test/basic/pages/first-page.js b/ionic/components/nav/test/basic/pages/first-page.js
index 655af564e7..c956c35b48 100644
--- a/ionic/components/nav/test/basic/pages/first-page.js
+++ b/ionic/components/nav/test/basic/pages/first-page.js
@@ -22,6 +22,7 @@ import {SecondPage} from './second-page';
       '<p>First Page: {{ val }}</p>' +
       '<p><button class="button" (click)="push()">Push (Go to 2nd)</button></p>' +
       '<p><button class="button" [push-data]="pushData" [nav-push]="pushPage">Push w/ nav-push (Go to 2nd)</button></p>' +
+      '<icon class="ion-ios-arrow-back"></icon>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
     '</ion-content>',
diff --git a/ionic/components/view/view-controller.js b/ionic/components/view/view-controller.js
index 16eaaa18f7..0f5bc8a24f 100644
--- a/ionic/components/view/view-controller.js
+++ b/ionic/components/view/view-controller.js
@@ -34,8 +34,8 @@ export class ViewController {
     this.sbTransition = null;
     this.sbActive = false;
 
-    this.id = ++itemIds;
-    this.childIds = -1;
+    this.id = ++ctrlIds;
+    this._ids = -1;
   }
 
   push(ComponentClass, params = {}, opts = {}) {
@@ -395,7 +395,7 @@ console.log('completeSwipeBack', completeSwipeBack)
   }
 
   add(item) {
-    item.id = this.id + '' + (++this.childIds);
+    item.id = this.id + '' + (++this._ids);
     this.items.push(item);
   }
 
@@ -442,4 +442,4 @@ const CACHED_STATE = 2;
 const STAGED_ENTERING_STATE = 3;
 const STAGED_LEAVING_STATE = 4;
 
-let itemIds = -1;
+let ctrlIds = -1;
diff --git a/ionic/components/view/view-item.js b/ionic/components/view/view-item.js
index 3723784597..22e9928d26 100644
--- a/ionic/components/view/view-item.js
+++ b/ionic/components/view/view-item.js
@@ -240,7 +240,6 @@ export class ViewItem {
     The view is about to enter and become the active view.
   */
   willEnter() {
-    this.pane && this.pane.isTransitioning(true);
     this.instance && this.instance.viewWillEnter && this.instance.viewWillEnter();
   }
 
@@ -249,7 +248,6 @@ export class ViewItem {
     will fire, whether it was the first load or loaded from the cache.
   */
   didEnter() {
-    this.pane && this.pane.isTransitioning(false);
     this.pane && this.pane.showPane(true);
     this.instance && this.instance.viewDidEnter && this.instance.viewDidEnter();
   }
@@ -258,7 +256,6 @@ export class ViewItem {
     The view has is about to leave and no longer be the active view.
   */
   willLeave() {
-    this.pane && this.pane.isTransitioning(true);
     this.instance && this.instance.viewWillLeave && this.instance.viewWillLeave();
   }
 
@@ -267,7 +264,6 @@ export class ViewItem {
     will fire, whether it is cached or unloaded.
   */
   didLeave() {
-    this.pane && this.pane.isTransitioning(false);
     this.instance && this.instance.viewDidLeave && this.instance.viewDidLeave();
   }
 
diff --git a/ionic/transitions/ios-transition.js b/ionic/transitions/ios-transition.js
index 5a824c9656..2472d797bd 100644
--- a/ionic/transitions/ios-transition.js
+++ b/ionic/transitions/ios-transition.js
@@ -2,7 +2,7 @@ import {Transition} from './transition';
 import {Animation} from '../animations/animation';
 
 
-const DURATION = 1000;
+const DURATION = 600;
 const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
 
 const OPACITY = 'opacity';
@@ -65,11 +65,11 @@ class IOSTransition extends Transition {
     } else {
       // forward direction
       self.enteringView
-        .from(TRANSLATEX, OFF_RIGHT)
+        .from(TRANSLATEX, '99%')
         .from(OPACITY, 1);
 
       self.enteringTitle
-        .from(TRANSLATEX, OFF_RIGHT);
+        .from(TRANSLATEX, '97%');
 
       self.leavingView
         .to(TRANSLATEX, OFF_LEFT)
diff --git a/ionic/transitions/transition.js b/ionic/transitions/transition.js
index 3dc6ec134a..e6c98e1e90 100644
--- a/ionic/transitions/transition.js
+++ b/ionic/transitions/transition.js
@@ -3,7 +3,6 @@ import {Animation} from '../animations/animation';
 const SHOW_NAVBAR_CSS = 'show-navbar';
 const SHOW_VIEW_CSS = 'show-view';
 const SHOW_BACK_BUTTON = 'show-back-button';
-const SHOW_NAVBAR_ITEM = 'show-navbar-item';
 
 let TransitionRegistry = {};
 
@@ -24,7 +23,6 @@ export class Transition extends Animation {
     self.enteringView.before.addClass(SHOW_VIEW_CSS);
     self.add(self.enteringView);
 
-    // create animation for the entering item's "ion-navbar" element
     if (opts.navbar !== false) {
       let enteringNavbar = self.enteringNavbar = new Animation(enteringItem.navbarElement());
       enteringNavbar.before.addClass(SHOW_NAVBAR_CSS);
@@ -34,28 +32,23 @@ export class Transition extends Animation {
         let enteringBackButton = self.enteringBackButton = new Animation(enteringItem.backButtonElement());
         enteringBackButton
           .before.addClass(SHOW_BACK_BUTTON)
-          .fadeIn();
+          .fromTo('opacity', 0.02, 1)
         enteringNavbar.add(enteringBackButton);
       }
 
-      // create animation for the entering item's "ion-title" element
       self.enteringTitle = new Animation(enteringItem.titleElement());
       enteringNavbar.add(self.enteringTitle);
       self.add(enteringNavbar);
 
       self.enteringNavbarItems = new Animation(enteringItem.navbarItemElements())
-      self.enteringNavbarItems
-        .before.addClass(SHOW_NAVBAR_ITEM)
-        .fadeIn();
+      self.enteringNavbarItems.fromTo('opacity', 0.02, 1)
       enteringNavbar.add(self.enteringNavbarItems);
     }
 
     if (leavingItem) {
-      // create animation for the entering item's "ion-view" element
       self.leavingView = new Animation(leavingItem.viewElement());
       self.leavingView.after.removeClass(SHOW_VIEW_CSS);
 
-      // create animation for the entering item's "ion-navbar" element
       let leavingNavbar = self.leavingNavbar = new Animation(leavingItem.navbarElement());
       leavingNavbar.after.removeClass(SHOW_NAVBAR_CSS);
 
@@ -65,14 +58,11 @@ export class Transition extends Animation {
         .fadeOut();
       leavingNavbar.add(leavingBackButton);
 
-      // create animation for the leaving item's "ion-title" element
       self.leavingTitle = new Animation(leavingItem.titleElement());
       leavingNavbar.add(self.leavingTitle);
 
       self.leavingNavbarItems = new Animation(leavingItem.navbarItemElements())
-      self.leavingNavbarItems
-        .after.removeClass(SHOW_NAVBAR_ITEM)
-        .fadeOut();
+      self.leavingNavbarItems.fadeOut();
       leavingNavbar.add(self.leavingNavbarItems);
 
       self.add(self.leavingView, leavingNavbar);
diff --git a/scripts/e2e/ionic.template.html b/scripts/e2e/ionic.template.html
index 0246746043..ead7d6449d 100644
--- a/scripts/e2e/ionic.template.html
+++ b/scripts/e2e/ionic.template.html
@@ -2,16 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
+  <!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
   <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
   <link href="/../../../../dist/css/ionic.css" rel="stylesheet">
-<!--
-  <script src="/../../../node_modules/angular2/node_modules/zone.js/dist/zone.js"></script>
-   <script src="/../../../node_modules/reflect-metadata/Reflect.js"></script>
-  <script src="/../../../system.js"></script>
-  <script src="/../../../angular2.js"></script>
-  <script src="https://jspm.io/system@0.16.js"></script>
-  -->
 
   <style>
     /* hack to create tall scrollable areas for testing using <f></f> */