Fixing the toogle offset.

dist/ratchet.css

@@ -1137,6 +1137,8 @@ button.button-block {
 /* Active state for toggle handle */
 .toggle.active .toggle-handle {
   border-color: #4cd964;
+  -webkit-transform: translate3d(17px,0,0);
+          transform: translate3d(17px,0,0);
 }/* Push styles (to be used with push.js)
 -------------------------------------------------- */
 

dist/ratchet.js

@@ -701,13 +701,10 @@
     var handle      = toggle.querySelector('.toggle-handle');
     var toggleWidth = toggle.offsetWidth;
     var handleWidth = handle.offsetWidth;
-    var offset      = toggle.classList.contains('active') ? toggleWidth - handleWidth : 0;
+    var offset      = toggle.classList.contains('active') ? (toggleWidth - handleWidth) - 2 : 0;
 
     start     = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
     touchMove = false;
-
-    // todo: probably should be moved to the css
-    toggle.style['-webkit-transition-duration'] = 0;
   });
 
   window.addEventListener('touchmove', function (e) {
@@ -721,7 +718,7 @@
     var current     = e.touches[0];
     var toggleWidth = toggle.offsetWidth;
     var handleWidth = handle.offsetWidth;
-    var offset      = toggleWidth - handleWidth;
+    var offset      = (toggleWidth - handleWidth) - 2;
 
     touchMove = true;
     distanceX = current.pageX - start.pageX;
@@ -744,7 +741,7 @@
     var handle      = toggle.querySelector('.toggle-handle');
     var toggleWidth = toggle.offsetWidth;
     var handleWidth = handle.offsetWidth;
-    var offset      = toggleWidth - handleWidth;
+    var offset      = (toggleWidth - handleWidth) - 2;
     var slideOn     = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
 
     if (slideOn) handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';

lib/css/toggles.css

@@ -35,4 +35,6 @@
 /* Active state for toggle handle */
 .toggle.active .toggle-handle {
   border-color: #4cd964;
+  -webkit-transform: translate3d(17px,0,0);
+          transform: translate3d(17px,0,0);
 }

lib/js/toggles.js

@@ -28,13 +28,10 @@
     var handle      = toggle.querySelector('.toggle-handle');
     var toggleWidth = toggle.offsetWidth;
     var handleWidth = handle.offsetWidth;
-    var offset      = toggle.classList.contains('active') ? toggleWidth - handleWidth : 0;
+    var offset      = toggle.classList.contains('active') ? (toggleWidth - handleWidth) - 2 : 0;
 
     start     = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
     touchMove = false;
-
-    // todo: probably should be moved to the css
-    toggle.style['-webkit-transition-duration'] = 0;
   });
 
   window.addEventListener('touchmove', function (e) {
@@ -48,7 +45,7 @@
     var current     = e.touches[0];
     var toggleWidth = toggle.offsetWidth;
     var handleWidth = handle.offsetWidth;
-    var offset      = toggleWidth - handleWidth;
+    var offset      = (toggleWidth - handleWidth) - 2;
 
     touchMove = true;
     distanceX = current.pageX - start.pageX;
@@ -71,7 +68,7 @@
     var handle      = toggle.querySelector('.toggle-handle');
     var toggleWidth = toggle.offsetWidth;
     var handleWidth = handle.offsetWidth;
-    var offset      = toggleWidth - handleWidth;
+    var offset      = (toggleWidth - handleWidth) - 2;
     var slideOn     = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
 
     if (slideOn) handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';