From f3bf2c13481da118bc4a0116ef3f4de37f1ca02f Mon Sep 17 00:00:00 2001
From: Max Lynch <max@codiqa.com>
Date: Tue, 3 Dec 2013 18:41:44 -0600
Subject: [PATCH] Lots of solidification

---
 dist/css/ionic.css                            |  11 +-
 dist/js/ionic-angular.js                      |   4 +-
 dist/js/ionic.js                              |   2 +-
 js/ext/angular/src/directive/ionicSideMenu.js |   2 +-
 js/ext/angular/src/directive/ionicTabBar.js   |   2 +-
 js/ext/angular/test/nav.html                  |  98 ------------
 js/ext/angular/test/navPush.html              |  87 -----------
 js/ext/angular/test/navRouter.html            |  24 +--
 js/ext/angular/test/navTest.html              |  61 --------
 js/ext/angular/test/subControllers.html       |  16 +-
 js/ext/angular/test/tabBar.html               |  66 --------
 js/ext/angular/test/zyng.html                 | 141 ------------------
 js/views/scrollZyng.js                        |   2 +-
 scss/_scaffolding.scss                        |   9 +-
 14 files changed, 46 insertions(+), 479 deletions(-)
 delete mode 100644 js/ext/angular/test/nav.html
 delete mode 100644 js/ext/angular/test/navPush.html
 delete mode 100644 js/ext/angular/test/navTest.html
 delete mode 100644 js/ext/angular/test/tabBar.html
 delete mode 100644 js/ext/angular/test/zyng.html

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index b2ae4e0de0..750b41a726 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2246,8 +2246,10 @@ body, .ionic-body {
 .scroll-content {
   width: 100%;
   top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
-  position: relative;
+  position: absolute;
   overflow: hidden;
   margin-top: -1px;
   width: auto; }
@@ -2356,7 +2358,12 @@ body, .ionic-body {
   bottom: 49px; }
 
 .pane {
-  position: fixed;
+  position: fixed; }
+
+.view {
+  position: absolute; }
+
+.pane, .view {
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 6301c4e462..8d68a2969f 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -1959,7 +1959,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
     replace: true,
     transclude: true,
     scope: true,
-    template: '<div class="sub-pane menu menu-{{side}}"></div>',
+    template: '<div class="menu menu-{{side}}"></div>',
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr, sideMenuCtrl) {
         $scope.side = $attr.side;
@@ -2122,7 +2122,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     transclude: true,
     controller: 'TabsCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="pane"><tab-controller-bar></tab-controller-bar></div>',
+    template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
     compile: function(element, attr, transclude, tabsCtrl) {
       return function($scope, $element, $attr) {
         var tabs = $element[0].querySelector('.tabs');
diff --git a/dist/js/ionic.js b/dist/js/ionic.js
index af3dac6bfc..539f1c036b 100644
--- a/dist/js/ionic.js
+++ b/dist/js/ionic.js
@@ -3424,7 +3424,7 @@ var Scroller;
     	Math.min(this.__container.clientWidth, this.__container.parentElement.clientWidth), 
     	Math.min(this.__container.clientHeight, this.__container.parentElement.clientHeight), 
     	this.__content.offsetWidth, 
-    	this.__content.offsetHeight+80);
+    	this.__content.offsetHeight-20);
   },
   /*
   ---------------------------------------------------------------------------
diff --git a/js/ext/angular/src/directive/ionicSideMenu.js b/js/ext/angular/src/directive/ionicSideMenu.js
index 90226e9b01..e344f8ad84 100644
--- a/js/ext/angular/src/directive/ionicSideMenu.js
+++ b/js/ext/angular/src/directive/ionicSideMenu.js
@@ -138,7 +138,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
     replace: true,
     transclude: true,
     scope: true,
-    template: '<div class="sub-pane menu menu-{{side}}"></div>',
+    template: '<div class="menu menu-{{side}}"></div>',
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr, sideMenuCtrl) {
         $scope.side = $attr.side;
diff --git a/js/ext/angular/src/directive/ionicTabBar.js b/js/ext/angular/src/directive/ionicTabBar.js
index 8f4e3573dc..5c5ecb6ef6 100644
--- a/js/ext/angular/src/directive/ionicTabBar.js
+++ b/js/ext/angular/src/directive/ionicTabBar.js
@@ -51,7 +51,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     transclude: true,
     controller: 'TabsCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="pane"><tab-controller-bar></tab-controller-bar></div>',
+    template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
     compile: function(element, attr, transclude, tabsCtrl) {
       return function($scope, $element, $attr) {
         var tabs = $element[0].querySelector('.tabs');
diff --git a/js/ext/angular/test/nav.html b/js/ext/angular/test/nav.html
deleted file mode 100644
index a7422503f1..0000000000
--- a/js/ext/angular/test/nav.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<html ng-app="navTest">
-  <head>
-    <meta charset="utf-8">
-    <title>Nav Bars</title>
-
-    <!-- Sets initial viewport load and disables zooming  -->
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
-    <style>
-.view {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-}
-      .slide-in-slide-out {
-        /*
-        -webkit-transform: translate3d(0%, 0, 0);
-                transform: translate3d(0%, 0, 0);
-
-       -webkit-transition: -webkit-transform 1s ease-in-out;
-               transition:         transform 1s ease-in-out;
-        */
-      }
-    </style>
-
-    <script src="../../../../dist/js/ionic.js"></script>
-    <script src="../../../../dist/js/angular/angular.js"></script>
-    <script src="../../../../dist/js/angular/angular-animate.js"></script>
-    <script src="../../../../dist/js/angular/angular-route.js"></script>
-    <script src="../../../../dist/js/angular/angular-touch.js"></script>
-    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
-    <script src="../../../../dist/js/ionic-angular.js"></script>
-  </head>
-  <body>
-
-    <navigation first="page.html">
-      <nav-bar type="bar-primary" back-button-type="button-pure button-icon" back-button-icon="ion-arrow-left-c">
-      </nav-bar>
-    </navigation>
-
-    <script id="page.html" type="text/ng-template">
-      <div title="title" class="nav-page">
-        <div ng-controller="CatsCtrl">
-          <content has-header="true">
-            <h1></h1>
-            <a href="#" class="button button-royal" nav-push="page.html">Next</a>
-            <button class="button button-assertive" ng-click="thisThing()">Doit</button>
-            <list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>
-          </content>
-        </div>
-      </div>
-    </script>
-
-    <script>
-      var pageNumber = 0;
-
-      var pushIt = function($scope, $compile, $element, cb) {
-        var childScope = $scope.$new();
-        childScope.isVisible = true;
-
-        var items = [];
-        for(var i = 0; i < 100; i++) {
-          items.push({});
-        }
-        childScope.items = items;
-
-        pageNumber++;
-
-      }
-
-      angular.module('navTest', ['ionic', 'ngAnimate'])
-
-
-      .controller('CatsCtrl', function($scope, $compile, $element) {
-        $scope.$on('navContent.shown', function() {
-          console.log('SHOWN');
-        });
-        $scope.$on('navContent.hidden', function() {
-          console.log('HIDDEN');
-        });
-
-        $scope.thisThing = function() {
-          console.log("THIS THING");
-        };
-
-        var items = [];
-        for(var i = 0; i < 100; i++) {
-          items.push({});
-        }
-        $scope.items = items;
-        $scope.goNext = function() {
-          $scope.navController.pushFromTemplate('page.html');
-        };
-      });
-    </script>
-  </body>
-</html>
-
diff --git a/js/ext/angular/test/navPush.html b/js/ext/angular/test/navPush.html
deleted file mode 100644
index 132ac7addb..0000000000
--- a/js/ext/angular/test/navPush.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<html ng-app="navTest">
-  <head>
-    <meta charset="utf-8">
-    <title>Nav Bars</title>
-
-    <!-- Sets initial viewport load and disables zooming  -->
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
-    <style>
-.view {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  background-color: black;
-}
-      .slide-in-slide-out {
-        /*
-        -webkit-transform: translate3d(0%, 0, 0);
-                transform: translate3d(0%, 0, 0);
-
-       -webkit-transition: -webkit-transform 1s ease-in-out;
-               transition:         transform 1s ease-in-out;
-        */
-      }
-    </style>
-
-    <script src="../../../../dist/js/ionic.js"></script>
-    <script src="../../../../dist/js/angular/angular.js"></script>
-    <script src="../../../../dist/js/angular/angular-animate.js"></script>
-    <script src="../../../../dist/js/angular/angular-route.js"></script>
-    <script src="../../../../dist/js/angular/angular-touch.js"></script>
-    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
-    <script src="../../../../dist/js/ionic-angular.js"></script>
-  </head>
-  <body>
-
-    <navigation first="page.html">
-      <nav-bar type="bar-primary" back-button-type="button-pure" align-title="left">
-      </nav-bar>
-    </navigation>
-
-    <script id="page.html" type="text/ng-template">
-      <div title="title" class="nav-page">
-        <div ng-controller="CatsCtrl">
-          <content has-header="true">
-            {{secretNumber}}
-            <list><item ng-repeat="item in items" nav-push="page.html">{{item.t}}</item></list>
-            <button nav-push="page.html" class="button button-assertive">Do it</button>
-          </content>
-        </div>
-      </div>
-    </script>
-
-    <script>
-      angular.module('navTest', ['ionic', 'ngAnimate'])
-
-      .controller('CatsCtrl', function($scope, $compile, $element) {
-        $scope.$on('navContent.shown', function() {
-          console.log('SHOWN');
-        });
-        $scope.$on('navContent.hidden', function() {
-          console.log('HIDDEN');
-        });
-
-        $scope.secretNumber = Math.floor(Math.random() * 100);
-
-        $scope.doit = function() { alert('waht'); };
-
-        var items = [
-          {t: 'This one'},
-          {t: 'Hmm, maybe this one'},
-          {t: 'Not that one, this one'},
-          {t: 'Um, this one?'},
-          {t: 'No, this one'}
-        ];
-        items = items.sort(function() {
-          return .5 - Math.random();
-        });
-        $scope.items = items;
-        $scope.goNext = function() {
-          $scope.navController.pushFromTemplate('page.html');
-        };
-      });
-    </script>
-  </body>
-</html>
-
diff --git a/js/ext/angular/test/navRouter.html b/js/ext/angular/test/navRouter.html
index bc54780200..2f277ac609 100644
--- a/js/ext/angular/test/navRouter.html
+++ b/js/ext/angular/test/navRouter.html
@@ -22,23 +22,29 @@
 
     <script id="page1.html" type="text/ng-template">
       <nav-page title="'Bears'" hide-back-button="true">
-        <h1>Page 1</h1>
-        <span>{{num}}</span>
-        <a class="button button-pure" nav-back>Back</a>
-        <a class="button button-assertive" href="#/page2">Next</a>
+        <content has-header="true">
+          <h1>Page 1</h1>
+          <span>{{num}}</span>
+          <a class="button button-pure" nav-back>Back</a>
+          <a class="button button-assertive" href="#/page2">Next</a>
+        </content>
       </nav-page>
     </script>
     <script id="page2.html" type="text/ng-template">
       <nav-page title="'Beets'">
-        <h1>Page 2</h1>
-        <a class="button button-pure" nav-back>Back</a>
-        <a class="button button-assertive" href="#/page3">Next</a>
+        <content has-header="true">
+          <h1>Page 2</h1>
+          <a class="button button-pure" nav-back>Back</a>
+          <a class="button button-assertive" href="#/page3">Next</a>
+        </content>
       </nav-page>
     </script>
     <script id="page3.html" type="text/ng-template">
       <nav-page title="'Battlestar Galactica'">
-        <h1>Page 3</h1>
-        <a class="button button-pure" nav-back>Back</a>
+        <content has-header="true">
+          <h1>Page 3</h1>
+          <a class="button button-pure" nav-back>Back</a>
+        </content>
       </nav-page>
     </script>
     <script>
diff --git a/js/ext/angular/test/navTest.html b/js/ext/angular/test/navTest.html
deleted file mode 100644
index 0089d20601..0000000000
--- a/js/ext/angular/test/navTest.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<html ng-app="navTest">
-  <head>
-    <meta charset="utf-8">
-    <title>Nav Bars</title>
-
-    <!-- Sets initial viewport load and disables zooming  -->
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
-    <script src="../../../../dist/js/ionic.js"></script>
-    <script src="../../../../dist/js/angular/angular.js"></script>
-    <script src="../../../../dist/js/angular/angular-animate.js"></script>
-    <script src="../../../../dist/js/angular/angular-route.js"></script>
-    <script src="../../../../dist/js/angular/angular-touch.js"></script>
-    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
-    <script src="../../../../dist/js/ionic-angular.js"></script>
-  </head>
-  <body>
-
-    <navs>
-      <nav-bar type="bar-primary" back-button-type="button-pure">
-      </nav-bar>
-
-      <div ng-controller="AppCtrl">
-        <content has-header="true">
-        </content>
-      </div>
-    </navs>
-
-    <script id="page.html" type="text/ng-template">
-      <div title="Home home" ng-controller="CatsCtrl" class="nav-content">
-        <h1></h1>
-        <button class="button button-success" ng-click="goNext()">Next</button>
-        <list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>
-      </div>
-    </script>
-
-    <script>
-      angular.module('navTest', ['ionic', 'ngAnimate'])
-
-      .controller('AppCtrl', function($scope) {
-        $scope.navController.pushFromTemplate('page.html');
-      })
-
-      .controller('CatsCtrl', function($scope, $compile, $element) {
-        
-
-        $scope.$on('navContent.shown', function() {
-          console.log('SHOWN');
-        });
-        $scope.$on('navContent.hidden', function() {
-          console.log('HIDDEN');
-        });
-
-        $scope.goNext = function() {
-          $scope.navController.pushFromTemplate('page.html');
-        };
-      });
-    </script>
-  </body>
-</html>
-
diff --git a/js/ext/angular/test/subControllers.html b/js/ext/angular/test/subControllers.html
index 7368173897..593d5d687f 100644
--- a/js/ext/angular/test/subControllers.html
+++ b/js/ext/angular/test/subControllers.html
@@ -16,7 +16,7 @@
   </head>
   <body>
 
-    <side-menu>
+    <side-menus>
       <pane side-menu-content>
         <header class="bar bar-header bar-dark">
           <a href="#" class="button"><i class="icon-reorder"></i></a>
@@ -26,17 +26,17 @@
           <h1>Slide me side to side!</h1>
         </div>
       </pane>
-      <menu side="left">
+      <side-menu side="left">
         <h2>Left</h2>
         <ul class="list">
           <a href="#" class="list-item" ng-repeat="item in list">
             {{item.text}}
           </a>
         </ul>
-      </menu>
-      <menu side="right">
+      </side-menu>
+      <side-menu side="right">
         <tabs>
-          <tab title="Home" icon="icon-home" class="tab-content">
+          <tab title="Home" icon="ion-home" class="tab-content">
             <header class="bar bar-header bar-dark">
               <h1 class="title">Tab Bars</h1>
             </header>
@@ -50,7 +50,7 @@
             </content>
           </tab>
 
-          <tab title="About" icon="icon-info" class="tab-content">
+          <tab title="About" icon="ion-info" class="tab-content">
             <header class="bar bar-header bar-success">
               <h1 class="title">About</h1>
             </header>
@@ -68,8 +68,8 @@
             </content>
           </tab>
         </tabs>
-      </menu>
-    </side-menu>
+      </side-menu>
+    </side-menus>
     <script>
       angular.module('sideMenuTest', ['ionic']);
 
diff --git a/js/ext/angular/test/tabBar.html b/js/ext/angular/test/tabBar.html
deleted file mode 100644
index 3a413cb61b..0000000000
--- a/js/ext/angular/test/tabBar.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<html ng-app="tabsTest">
-  <head>
-    <meta charset="utf-8">
-    <title>Tab Bars</title>
-
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
-    <style>
-      .fade-out > .ng-enter, 
-      .fade-out > .ng-leave, 
-      .fade-out > .ng-move {
-        -webkit-transition: 0.2s linear all;
-        transition: 0.4s ease-out all;
-        position:relative;
-      }
-
-      .fade-out > .ng-enter {
-        left:-10px;
-        opacity:0;
-      }
-      .fade-out > .ng-enter.ng-enter-active {
-        left:0;
-        opacity:1;
-      }
-
-      .fade-out > .ng-leave {
-        left:0;
-        opacity:1;
-      }
-      .fade-out > .ng-leave.ng-leave-active {
-        left:-10px;
-        opacity:0;
-      }
-
-      .fade-out > .ng-move {
-        opacity:0.5;
-      }
-      .fade-out > .ng-move.ng-move-active {
-        opacity:1;
-      }
-
-      .completed {
-        text-decoration: line-through;
-      }
-    </style>
-    <script src="../../../../dist/js/ionic.js"></script>
-    <script src="../../../../dist/js/angular/angular.js"></script>
-    <script src="../../../../dist/js/angular/angular-animate.js"></script>
-    <script src="../../../../dist/js/angular/angular-route.js"></script>
-    <script src="../../../../dist/js/angular/angular-touch.js"></script>
-    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
-    <script src="../../../../dist/js/ionic-angular.js"></script>
-  </head>
-  <body>
-    <tab-bar>
-      <tab-item title="Home"></tab-item>
-      <tab-item title="Item"></tab-item>
-      <tab-item title="Test"></tab-item>
-    </tab-bar>
-
-    <script>
-      angular.module('tabsTest', ['ionic.ui', 'ionic.service.modal', 'ionic.service.actionSheet'])
-
-    </script>
-  </body>
-</html>
diff --git a/js/ext/angular/test/zyng.html b/js/ext/angular/test/zyng.html
deleted file mode 100644
index 567d736b6e..0000000000
--- a/js/ext/angular/test/zyng.html
+++ /dev/null
@@ -1,141 +0,0 @@
-<html ng-app="zyngTest">
-  <head>
-    <meta charset="utf-8">
-    <title>Content</title>
-
-    <!-- Sets initial viewport load and disables zooming  -->
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
-
-    <script src="../../../../dist/js/ionic.js"></script>
-    <script src="../../../../dist/js/angular/angular.js"></script>
-    <script src="../../../../dist/js/angular/angular-animate.js"></script>
-    <script src="../../../../dist/js/angular/angular-route.js"></script>
-    <script src="../../../../dist/js/angular/angular-touch.js"></script>
-    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
-    <script src="../../../../dist/js/ionic-angular.js"></script>
-    <style>
-	#c{
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		overflow: hidden;
-		font-family: sans-serif;
-		cursor: default;
-	
-		-webkit-user-select: none;
-		-moz-user-select: none;
-		-ms-user-select: none;
-		-o-user-select: none;
-		user-select: none;
-	}
-	
-	#content{
-		background: white;
-    width: 100%;
-		
-		-webkit-transform-origin: left top;
-		-webkit-transform: translateZ(0);
-		-moz-transform-origin: left top;
-		-moz-transform: translateZ(0);
-		-ms-transform-origin: left top;
-		-ms-transform: translateZ(0);
-		-o-transform-origin: left top;
-		-o-transform: translateZ(0);
-		transform-origin: left top;
-		transform: translateZ(0);
-	}
-    </style>
-  </head>
-  <body ng-controller="AppCtrl">
-    <div id="c">
-      <div id="content">
-       <div style="height: 3000px; width: 100%; background: url('tree_bark.png') repeat"></div>
-     </div>
-    </div>
-
-    <script>
-      angular.module('zyngTest', ['ionic'])
-      .controller('AppCtrl', function($scope) {
-      });
-
-      var render = function(left, top, zoom) {
-        content.style.webkitTransform = 'translate3d(' + (-left) + 'px,' + (-top) + 'px,0) scale(' + zoom + ')';
-      };	
-
-      var container = document.getElementById('c');
-      // Initialize Scroller
-      var scroller = new ionic.views.Scroller({
-        scrollingX: false
-      });
-
-      // Update Scroller dimensions for changed content
-      scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight-50);
-      // Event Handler
-      
-      if ('ontouchstart' in window) {
-        
-        container.addEventListener("touchstart", function(e) {
-          // Don't react if initial down happens on a form element
-          if (e.target.tagName.match(/input|textarea|select/i)) {
-            return;
-          }
-          
-          scroller.doTouchStart(e.touches, e.timeStamp);
-          e.preventDefault();
-        }, false);
-
-        document.addEventListener("touchmove", function(e) {
-          scroller.doTouchMove(e.touches, e.timeStamp);
-        }, false);
-
-        document.addEventListener("touchend", function(e) {
-          scroller.doTouchEnd(e.timeStamp);
-        }, false);
-        
-      } else {
-        
-        var mousedown = false;
-
-        container.addEventListener("mousedown", function(e) {
-          // Don't react if initial down happens on a form element
-          if (e.target.tagName.match(/input|textarea|select/i)) {
-            return;
-          }
-          
-          scroller.doTouchStart([{
-            pageX: e.pageX,
-            pageY: e.pageY
-          }], e.timeStamp);
-
-          mousedown = true;
-        }, false);
-
-        document.addEventListener("mousemove", function(e) {
-          if (!mousedown) {
-            return;
-          }
-
-          scroller.doTouchMove([{
-            pageX: e.pageX,
-            pageY: e.pageY
-          }], e.timeStamp);
-
-          mousedown = true;
-        }, false);
-
-        document.addEventListener("mouseup", function(e) {
-          if (!mousedown) {
-            return;
-          }
-
-          scroller.doTouchEnd(e.timeStamp);
-
-          mousedown = false;
-        }, false);
-        
-      }
-    </script>
-  </body>
-</html>
-
diff --git a/js/views/scrollZyng.js b/js/views/scrollZyng.js
index 1e8e57be0b..d0b76649a0 100644
--- a/js/views/scrollZyng.js
+++ b/js/views/scrollZyng.js
@@ -590,7 +590,7 @@ var Scroller;
     	Math.min(this.__container.clientWidth, this.__container.parentElement.clientWidth), 
     	Math.min(this.__container.clientHeight, this.__container.parentElement.clientHeight), 
     	this.__content.offsetWidth, 
-    	this.__content.offsetHeight+80);
+    	this.__content.offsetHeight-20);
   },
   /*
   ---------------------------------------------------------------------------
diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
index a665e49996..cec476afd8 100644
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -61,9 +61,11 @@ body, .ionic-body {
 .scroll-content {
   width: 100%;
   top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
 
-  position: relative;
+  position: absolute;
   overflow: hidden;
 
   // Hide the top border if any
@@ -192,6 +194,11 @@ body, .ionic-body {
 // A full screen section with a solid background
 .pane {
   position: fixed;
+}
+.view {
+  position: absolute;
+}
+.pane, .view {
   top: 0;
   right: 0;
   bottom: 0;