Fixed scroll issue with slidebox

dist/css/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.
@@ -1463,7 +1462,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; }
 
@@ -1550,7 +1549,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" */
@@ -1565,7 +1564,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-"],
@@ -1811,7 +1810,7 @@ input[type="checkbox"][readonly] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px white; }
+      text-shadow: 0px 0px 10px #fff; }
   .button.button-inline {
     display: inline-block;
     margin: 0;
@@ -1943,7 +1942,7 @@ a.button {
   width: 100%;
   background-color: white;
   border-radius: 2px;
-  border: 1px solid #dddddd; }
+  border: 1px solid #ddd; }
 
 .card-header {
   padding: 10px;

dist/css/ionic-scoped.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 .ionic {
   @font-face {
     font-family: 'ionicons';
@@ -991,7 +990,7 @@
   .ionic fieldset {
     margin: 0 2px;
     padding: 0.35em 0.625em 0.75em;
-    border: 1px solid silver; }
+    border: 1px solid #c0c0c0; }
   .ionic legend {
     padding: 0;
     /* 2 */
@@ -2078,7 +2077,7 @@
   .ionic input[type="file"]:focus,
   .ionic input[type="radio"]:focus,
   .ionic input[type="checkbox"]:focus {
-    outline: thin dotted #333333;
+    outline: thin dotted #333;
     outline: 5px auto -webkit-focus-ring-color;
     outline-offset: -2px; }
   .ionic input:-moz-placeholder,
@@ -2136,7 +2135,7 @@
       border: 1px solid #049cdb;
       border-radius: 50%;
       background: white;
-      transition: background-color 0.1s ease-in-out; }
+      transition: background-color .1s ease-in-out; }
     .ionic .checkbox .handle:after {
       position: absolute;
       top: 37%;
@@ -2148,7 +2147,7 @@
       border-right: none;
       content: '';
       opacity: 0;
-      transition: opacity 0.1s ease-in-out;
+      transition: opacity .1s ease-in-out;
       -webkit-transform: rotate(-45deg);
       transform: rotate(-45deg); }
     .ionic .checkbox input:checked + .handle {
@@ -2435,7 +2434,7 @@
       .ionic .button.button-icon:active, .ionic .button.button-icon.active {
         background: none;
         box-shadow: none;
-        text-shadow: 0px 0px 10px white; }
+        text-shadow: 0px 0px 10px #fff; }
     .ionic .button.button-inline {
       display: inline-block;
       margin: 0;
@@ -2547,7 +2546,7 @@
     width: 100%;
     background-color: white;
     border-radius: 2px;
-    border: 1px solid #dddddd; }
+    border: 1px solid #ddd; }
   .ionic .card-header {
     padding: 10px;
     background-color: white; }

dist/css/ionic.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 @font-face {
   font-family: 'ionicons';
   src: url("fonts/ionicons.eot");
@@ -1246,7 +1245,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.
@@ -2550,7 +2549,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; }
 
@@ -2613,7 +2612,7 @@ input[type="checkbox"][readonly] {
     border: 1px solid #049cdb;
     border-radius: 50%;
     background: white;
-    transition: background-color 0.1s ease-in-out; }
+    transition: background-color .1s ease-in-out; }
   .checkbox .handle:after {
     position: absolute;
     top: 37%;
@@ -2625,7 +2624,7 @@ input[type="checkbox"][readonly] {
     border-right: none;
     content: '';
     opacity: 0;
-    transition: opacity 0.1s ease-in-out;
+    transition: opacity .1s ease-in-out;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg); }
   .checkbox input:checked + .handle {
@@ -2929,7 +2928,7 @@ input[type="checkbox"][readonly] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px white; }
+      text-shadow: 0px 0px 10px #fff; }
   .button.button-inline {
     display: inline-block;
     margin: 0;
@@ -3061,7 +3060,7 @@ a.button {
   width: 100%;
   background-color: white;
   border-radius: 2px;
-  border: 1px solid #dddddd; }
+  border: 1px solid #ddd; }
 
 .card-header {
   padding: 10px;
@@ -3088,6 +3087,9 @@ a.button {
   padding: 10px; }
 
 .slide-box {
+  overflow: hidden; }
+
+.slide-box-items {
   position: relative;
   white-space: nowrap;
   -webkit-transition: -webkit-transform 0 ease-in-out;

dist/js/ionic.js

@@ -2302,7 +2302,7 @@ window.ionic = {
       this._initDrag();
 
       // Make sure to grab the element we will slide as our target
-      content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box');
+      content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box-items');
       if(!content) {
         return;
       }

js/views/slideBox.js

@@ -36,7 +36,7 @@
       this._initDrag();
 
       // Make sure to grab the element we will slide as our target
-      content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box');
+      content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box-items');
       if(!content) {
         return;
       }

scss/ionic/_slideBox.scss

@@ -1,4 +1,8 @@
 .slide-box {
+  // Make sure items don't scroll over ever
+  overflow: hidden;
+}
+.slide-box-items {
   position: relative;
   white-space: nowrap;
   -webkit-transition: -webkit-transform 0 ease-in-out;

test/slideBox.html

@@ -18,14 +18,16 @@
       <main class="content-wrapper">
         <div class="content has-header">
           <div class="slide-box" id="slide-box">
-            <div class="slide-box-content">
+            <div class="slide-box-items">
-              <img src="http://1.bp.blogspot.com/-kXS3MLcpTPw/T4rZBW2p8DI/AAAAAAAABqI/tR5aiO4Cj58/s1600/cows2.jpg">
+              <div class="slide-box-content">
-            </div>
+                <img src="http://1.bp.blogspot.com/-kXS3MLcpTPw/T4rZBW2p8DI/AAAAAAAABqI/tR5aiO4Cj58/s1600/cows2.jpg">
-            <div class="slide-box-content">
+              </div>
-              <img src="http://farm6.staticflickr.com/5226/5663664227_ba5e573930_z.jpg">
+              <div class="slide-box-content">
-            </div>
+                <img src="http://farm6.staticflickr.com/5226/5663664227_ba5e573930_z.jpg">
-            <div class="slide-box-content">
+              </div>
-              <img src="http://i677.photobucket.com/albums/vv137/smileytrucker/cow-toy-car-stuck-head-1259518194w.jpg">
+              <div class="slide-box-content">
+                <img src="http://i677.photobucket.com/albums/vv137/smileytrucker/cow-toy-car-stuck-head-1259518194w.jpg">
+              </div>
             </div>
           </div>
         </div>