Scroll tweaks

dist/css/ionic-ios7.css

@@ -1,3 +1,4 @@
+@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.
@@ -181,7 +182,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -1581,7 +1582,7 @@ input[type="checkbox"][readonly] {
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, .05s; }
+  transition-delay: 0s, 0.05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -1596,7 +1597,7 @@ input[type="checkbox"][readonly] {
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: .05s, 0s; }
+    transition-delay: 0.05s, 0s; }
 
 .radio-buttton-list .list-item-content {
   /* give some room to the right for the checkmark icon */
@@ -1865,7 +1866,7 @@ input[type="range"] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px #fff; }
+      text-shadow: 0px 0px 10px white; }
   .button.block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
@@ -2243,9 +2244,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -2258,9 +2259,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 

dist/css/ionic-scoped.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .ionic {
   @font-face {
     font-family: 'ionicons';
@@ -1023,7 +1024,7 @@
   .ionic fieldset {
     margin: 0 2px;
     padding: 0.35em 0.625em 0.75em;
-    border: 1px solid #c0c0c0; }
+    border: 1px solid silver; }
   .ionic legend {
     padding: 0;
     /* 2 */
@@ -2225,7 +2226,7 @@
       border-radius: 50%;
       background: white;
       content: ' ';
-      transition: background-color .1s ease-in-out; }
+      transition: background-color 0.1s ease-in-out; }
   .ionic .checkbox input:after {
     position: absolute;
     top: 34%;
@@ -2238,7 +2239,7 @@
     border-right: 0;
     content: ' ';
     opacity: 0;
-    transition: opacity .05s ease-in-out;
+    transition: opacity 0.05s ease-in-out;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg); }
   .ionic .checkbox input:checked:before {
@@ -2575,7 +2576,7 @@
       .ionic .button.button-icon:active, .ionic .button.button-icon.active {
         background: none;
         box-shadow: none;
-        text-shadow: 0px 0px 10px #fff; }
+        text-shadow: 0px 0px 10px white; }
     .ionic .button.block, .ionic .button.button-full {
       margin-top: 10px;
       margin-bottom: 10px; }
@@ -2859,9 +2860,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin .75s linear infinite;
+    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin .75s linear infinite;
+    -moz-animation: spin 0.75s linear infinite;
-    animation: spin .75s linear infinite; }
+    animation: spin 0.75s linear infinite; }
     .ionic .icon-loading:before {
       content: "\e144"; }
   .ionic .icon-refreshing {
@@ -2873,9 +2874,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin .75s linear infinite;
+    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin .75s linear infinite;
+    -moz-animation: spin 0.75s linear infinite;
-    animation: spin .75s linear infinite; }
+    animation: spin 0.75s linear infinite; }
     .ionic .icon-refreshing:before {
       content: "\e144"; }
   .ionic .hidden,

dist/css/ionic.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @font-face {
   font-family: 'ionicons';
   src: url("fonts/ionicons.eot");
@@ -1260,7 +1261,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -2707,7 +2708,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color .1s ease-in-out; }
+    transition: background-color 0.1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -2722,7 +2723,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity .05s ease-in-out;
+  transition: opacity 0.05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -3086,7 +3087,7 @@ input[type="range"] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px #fff; }
+      text-shadow: 0px 0px 10px white; }
   .button.block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
@@ -3515,9 +3516,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -3530,9 +3531,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 

dist/js/ionic.js

@@ -2520,7 +2520,7 @@ window.ionic = {
     });
   };
 
-  ionic.views.Scroll.prototype = {
+  ionic.views.ScrollView.prototype = {
     DECEL_RATE_NORMAL: 0.998,
     DECEL_RATE_FAST: 0.99,
     DECEL_RATE_SLOW: 0.996,
@@ -2967,7 +2967,7 @@ var utils = (function () {
 ionic.views.Scroll = function (options) {
   var el = options.el;
 
-	this.wrapper = typeof el == 'string' ? document.querySelector(el) : el;
+	this.wrapper = el;//typeof el == 'string' ? document.querySelector(el) : el;
 	this.scroller = this.wrapper.children[0];
 	this.scrollerStyle = this.scroller.style;		// cache style for better performance
 

js/views/scrollView.js

@@ -37,7 +37,7 @@
     });
   };
 
-  ionic.views.Scroll.prototype = {
+  ionic.views.ScrollView.prototype = {
     DECEL_RATE_NORMAL: 0.998,
     DECEL_RATE_FAST: 0.99,
     DECEL_RATE_SLOW: 0.996,

js/views/scrollerView.js

@@ -244,7 +244,7 @@ var utils = (function () {
 ionic.views.Scroll = function (options) {
   var el = options.el;
 
-	this.wrapper = typeof el == 'string' ? document.querySelector(el) : el;
+	this.wrapper = el;//typeof el == 'string' ? document.querySelector(el) : el;
 	this.scroller = this.wrapper.children[0];
 	this.scrollerStyle = this.scroller.style;		// cache style for better performance
 

test/scroll.html

@@ -14,6 +14,20 @@
       .list-item {
         padding: 10px;
       }
+      #wrapper {
+        position:absolute; z-index:1;
+        top:0px; bottom:0px; left:0;
+        width:100%;
+        background:#aaa;
+        overflow:hidden;
+      }
+      #scroller {
+        position:absolute; z-index:1;
+        /*	-webkit-touch-callout:none;*/
+        -webkit-tap-highlight-color:rgba(0,0,0,0);
+        width:100%;
+        padding:0;
+      }
     </style>
   </head>
   <body>
@@ -23,21 +37,22 @@
         <h1 class="title">Scroll Me</h1>
         <a href="#" class="button button-danger button-clear">Delete</a>
       </div>
+      <div id="wrapper">
         <div id="scroller" class="scroll" style="margin-top:44px">
-        <div id="filler" style="height: 1400px; background: url('tree_bark.png') repeat;"></div>
           <ul class="list">
           </ul>
         </div>
+      </div>
     </section>
     <script src="../dist/js/ionic.js"></script>
     <script>
-      var s = document.getElementById('scroller');
+      var s = document.getElementById('wrapper');
 
       for(var i = 0; i < 100; i++) {
         var li = document.createElement('li');
         li.className = 'list-item';
         li.innerHTML = 'Item ' + i;
-        s.firstElementChild.appendChild(li);
+        s.firstElementChild.children[0].appendChild(li);
       }
 
       var scroll = new ionic.views.Scroll({