Some scroll tests and changing content to be at the top

dist/ionic-ios7.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /**
 * Adapted from normalize.css and some reset.css. We don't care even one
 * bit about old IE, so we don't need any hacks for that in here.
@@ -182,7 +181,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -336,6 +335,7 @@ body {
 
 .content {
   position: fixed;
+  top: 0;
   right: 0;
   bottom: 0;
   left: 0;
@@ -1770,7 +1770,7 @@ select:focus,
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted #333333;
+  outline: thin dotted #333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px; }
 
@@ -1857,7 +1857,7 @@ input[type="checkbox"][readonly] {
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, 0.05s; }
+  transition-delay: 0s, .05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -1872,7 +1872,7 @@ input[type="checkbox"][readonly] {
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: 0.05s, 0s; }
+    transition-delay: .05s, 0s; }
 
 /* hide a radio button's icon by default */
 .radio-item [class^="icon-"],
@@ -2048,7 +2048,7 @@ input[type="checkbox"][readonly] {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px white;
+      text-shadow: 0px 0px 10px #fff;
       box-shadow: none;
       background: none; }
 
@@ -2237,8 +2237,8 @@ a.button {
 }
 */
 .slide-in-up.enter {
-  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
+  -webkit-transition: -webkit-transform .4s, opacity .4s;
-  transition: transform 0.4s, opacity 0.4s;
+  transition: transform .4s, opacity .4s;
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.6, 0.1, 1); }
@@ -2246,8 +2246,8 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 .slide-in-up.leave {
-  -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
+  -webkit-transition: -webkit-transform .25s, opacity .25s;
-  transition: transform 0.25s, opacity 0.25s; }
+  transition: transform .25s, opacity .25s; }
 .slide-in-up.leave-active {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0); }

dist/ionic.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /**
 * Adapted from normalize.css and some reset.css. We don't care even one
 * bit about old IE, so we don't need any hacks for that in here.
@@ -182,7 +181,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -336,6 +335,7 @@ body {
 
 .content {
   position: fixed;
+  top: 0;
   right: 0;
   bottom: 0;
   left: 0;
@@ -1770,7 +1770,7 @@ select:focus,
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted #333333;
+  outline: thin dotted #333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px; }
 
@@ -2035,7 +2035,7 @@ input[type="checkbox"][readonly] {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px white;
+      text-shadow: 0px 0px 10px #fff;
       box-shadow: none;
       background: none; }
 
@@ -2224,8 +2224,8 @@ a.button {
 }
 */
 .slide-in-up.enter {
-  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
+  -webkit-transition: -webkit-transform .4s, opacity .4s;
-  transition: transform 0.4s, opacity 0.4s;
+  transition: transform .4s, opacity .4s;
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.6, 0.1, 1); }
@@ -2233,8 +2233,8 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 .slide-in-up.leave {
-  -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
+  -webkit-transition: -webkit-transform .25s, opacity .25s;
-  transition: transform 0.25s, opacity 0.25s; }
+  transition: transform .25s, opacity .25s; }
 .slide-in-up.leave-active {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0); }

dist/ionic.js

@@ -1692,7 +1692,7 @@ if ( document.readyState === "complete" ) {
     }
   };
 })(window.ionic);
-;(function(ionic) {
+;;(function(ionic) {
 
 ionic.views.NavBar = function(opts) {
   this.el = opts.el;

dist/ionicIcons.css

@@ -68,8 +68,7 @@ you can use the generic selector below, but it's slower:
 .icon-contact-filled:before {
 	content: "\e009";
 }
-;@charset "UTF-8";
+;/**
-/**
 * Adapted from normalize.css and some reset.css. We don't care even one
 * bit about old IE, so we don't need any hacks for that in here.
 * 
@@ -252,7 +251,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -406,6 +405,7 @@ body {
 
 .content {
   position: fixed;
+  top: 0;
   right: 0;
   bottom: 0;
   left: 0;
@@ -1840,7 +1840,7 @@ select:focus,
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted #333333;
+  outline: thin dotted #333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px; }
 
@@ -2105,7 +2105,7 @@ input[type="checkbox"][readonly] {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px white;
+      text-shadow: 0px 0px 10px #fff;
       box-shadow: none;
       background: none; }
 
@@ -2294,8 +2294,8 @@ a.button {
 }
 */
 .slide-in-up.enter {
-  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
+  -webkit-transition: -webkit-transform .4s, opacity .4s;
-  transition: transform 0.4s, opacity 0.4s;
+  transition: transform .4s, opacity .4s;
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.6, 0.1, 1); }
@@ -2303,8 +2303,8 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 .slide-in-up.leave {
-  -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
+  -webkit-transition: -webkit-transform .25s, opacity .25s;
-  transition: transform 0.25s, opacity 0.25s; }
+  transition: transform .25s, opacity .25s; }
 .slide-in-up.leave-active {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0); }

scss/ionic/_scaffolding.scss

@@ -36,6 +36,7 @@ body {
 
 .content {
   position: fixed; 
+  top: 0;
   right: 0;
   bottom: 0;
   left: 0;

test/scroll.html

@@ -0,0 +1,42 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>iOS 7</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="../dist/ionicIcons.css" rel="stylesheet">
+    <script src="../vendor/angular/1.2.0rc2/angular-1.2.0rc2.min.js"></script>
+  </head>
+  <body ng-app ng-controller="AppCtrl">
+
+    <div ng-switch="currentPage">
+      <section>
+        <div class="bar bar-header bar-secondary">
+          <a href="#" class="button button-danger button-clear">Edit</a>
+          <h1 class="title">World Clock</h1>
+          <a href="#" class="button button-danger button-clear">Delete</a>
+        </div>
+        <div class="content">
+          <div style="width: 100%; background-color: #ccc; height: 2000px"></div>
+        </div>
+      </section>
+      <section id="page2">
+        <div class="bar bar-header bar-success">
+          <a href="#" class="button button-danger button-clear">Edit</a>
+          <h1 class="title">World Clock</h1>
+          <a href="#" class="button button-danger button-clear">Delete</a>
+        </div>
+        <div class="content">
+          <div style="width: 100%; background-color: #ccc; height: 2000px"></div>
+        </div>
+      </section>
+    </div>
+    <script>
+      angular.module('test', [])
+
+      .controller('AppCtrl', function($scope) {
+      });
+    </script>
+  </body>
+</html>