diff --git a/index.js b/index.js
index 3215a5c..0d66b47 100644
--- a/index.js
+++ b/index.js
@@ -22,9 +22,44 @@ function Switch(input) {
 
   // read initial state and set Switch state accordingly
   if (this.input.checked) this.turnOn()
-  
+
 }
 
+/**
+ * Cross Browser add class method
+ */
+
+Switch.addClass = function( el, className) {
+  if (el.classList) {
+    el.classList.add(className);
+  } else {
+    el.className += ' ' + className;
+  }
+};
+
+/**
+ * Cross Browser remove class method
+ */
+
+Switch.removeClass = function( el, className) {
+  if (el.classList) {
+    el.classList.remove(className);
+  } else {
+    el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+  }
+};
+
+/**
+ * Cross Browser has class method
+ */
+
+Switch.hasClass = function(el, className) {
+  if (el.classList) {
+    return el.classList.contains(className);
+  } else {
+    return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
+  }
+};
 
 /**
  * Toggles on/off state
@@ -32,7 +67,7 @@ function Switch(input) {
 
 Switch.prototype.toggle = function() {
 
-  if(this.el.classList.contains('on')){
+  if( Switch.hasClass(this.el, 'on') ){
     this.turnOff();
   } else {
     this.turnOn();
@@ -47,8 +82,8 @@ Switch.prototype.toggle = function() {
  */
 
 Switch.prototype.turnOn = function() {
-  this.el.classList.add('on');
-  this.el.classList.remove('off');
+  Switch.addClass(this.el, 'on');
+  Switch.removeClass(this.el, 'off');
   this.input.checked = true;
 };
 
@@ -57,8 +92,8 @@ Switch.prototype.turnOn = function() {
  */
 
 Switch.prototype.turnOff = function() {
-  this.el.classList.remove('on');
-  this.el.classList.add('off');
+  Switch.removeClass(this.el, 'on');
+  Switch.addClass(this.el, 'off');
   this.input.checked = false;
 }
 
@@ -88,10 +123,10 @@ Switch.prototype._prepareDOM = function() {
 
   var stateBackground = document.createElement('div');
   stateBackground.className = 'state-background background-fill';
-  
+
   var handle = document.createElement('div');
   handle.className = 'handle';
-    
+
   this.el.appendChild(onBackground);
   this.el.appendChild(stateBackground);
   this.el.appendChild(handle);
diff --git a/ios7-switch.css b/ios7-switch.css
index bc13367..9efd0d7 100644
--- a/ios7-switch.css
+++ b/ios7-switch.css
@@ -2,291 +2,240 @@
   height: 45px;
   width: 75px;
   position: relative;
-  background-color: #E5E5E5;
+  background-color: #e5e5e5;
+  -webkit-border-radius: 100px;
   border-radius: 100px;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
   backface-visibility: hidden;
 }
-
 .ios-switch .background-fill {
   width: 100%;
   height: 100%;
+  -webkit-border-radius: 100px;
   border-radius: 100px;
   position: absolute;
   left: 0;
   top: 0;
 }
-
 .ios-switch .on-background {
+  background: #00e158;
+  background-image: -webkit-linear-gradient(#00e459, #00e158);
+  background-image: -moz-linear-gradient(#00e459, #00e158);
   background-image: -o-linear-gradient(#00e459, #00e158);
   background-image: -ms-linear-gradient(#00e459, #00e158);
-  background-image: -moz-linear-gradient(#00e459, #00e158);
-  background-image: -webkit-linear-gradient(#00e459, #00e158);
   background-image: linear-gradient(#00e459, #00e158);
   opacity: 0;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   z-index: 1;
-  -o-transition: .3s 0.2s;
-  -ms-transition: .3s 0.2s;
-  -moz-transition: .3s 0.2s;
-  -webkit-transition: .3s 0.2s;
-  transition: .3s 0.2s;
+  -webkit-transition: 0.3s 0.2s;
+  -moz-transition: 0.3s 0.2s;
+  -o-transition: 0.3s 0.2s;
+  -ms-transition: 0.3s 0.2s;
+  transition: 0.3s 0.2s;
 }
-
 .ios-switch .state-background {
+  -webkit-border-radius: 100px;
   border-radius: 100px;
   z-index: 2;
-  background-image: -o-linear-gradient(#ffffff, #FDFDFD);
-  background-image: -ms-linear-gradient(#ffffff, #FDFDFD);
-  background-image: -moz-linear-gradient(#ffffff, #FDFDFD);
-  background-image: -webkit-linear-gradient(#ffffff, #FDFDFD);
-  background-image: linear-gradient(#ffffff, #FDFDFD);
-  border: 2px solid #E5E5E5;
-  -o-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
+  background: #fdfdfd;
+  background-image: -webkit-linear-gradient(#fff, #fdfdfd);
+  background-image: -moz-linear-gradient(#fff, #fdfdfd);
+  background-image: -o-linear-gradient(#fff, #fdfdfd);
+  background-image: -ms-linear-gradient(#fff, #fdfdfd);
+  background-image: linear-gradient(#fff, #fdfdfd);
+  -webkit-transition: 0.4s;
+  -moz-transition: 0.4s;
+  -o-transition: 0.4s;
+  -ms-transition: 0.4s;
+  transition: 0.4s;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
-  -moz-transform: scale(1);
-  -webkit-transform: scale(1);
   transform: scale(1);
-  -o-transition: .4s;
-  -ms-transition: .4s;
-  -moz-transition: .4s;
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border: 2px solid #e5e5e5;
 }
-
 .ios-switch .handle {
   width: 41px;
   height: 41px;
-  background-color: white;
+  background-color: #fff;
   top: 2px;
   left: 2px;
   position: absolute;
+  -webkit-border-radius: 20px;
   border-radius: 20px;
-  box-shadow: 0 0 3px 1px hsla(0, 0%, 0%, .075), 0 3px 5px hsla(0, 0%, 0%, .15), 1px 2px 2px hsla(0, 0%, 0%, .05);
+  -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.075), 0 3px 5px rgba(0,0,0,0.15), 1px 2px 2px rgba(0,0,0,0.05);
+  box-shadow: 0 0 3px 1px rgba(0,0,0,0.075), 0 3px 5px rgba(0,0,0,0.15), 1px 2px 2px rgba(0,0,0,0.05);
   z-index: 3;
-  -o-transition: -o-transform .3s 0.25s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-  -ms-transition: -ms-transform .3s 0.25s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-  -moz-transition: -moz-transform .3s 0.25s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-  -webkit-transition: -webkit-transform .3s 0.25s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-  -o-transition: transform .3s 0.25s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-  -ms-transition: transform .3s 0.25s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-  -moz-transition: transform .3s 0.25s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-  -webkit-transition: transform .3s 0.25s cubic-bezier(0.455, 0.030, 0.215, 1.330);
-  transition: transform .3s 0.25s cubic-bezier(0.455, 0.030, 0.215, 1.330);
+  -webkit-transition: -webkit-transform 0.3s 0.25s cubic-bezier(0.455, 0.03, 0.215, 1.33);
+  -moz-transition: -moz-transform 0.3s 0.25s cubic-bezier(0.455, 0.03, 0.215, 1.33);
+  -o-transition: -o-transform 0.3s 0.25s cubic-bezier(0.455, 0.03, 0.215, 1.33);
+  -ms-transition: -ms-transform 0.3s 0.25s cubic-bezier(0.455, 0.03, 0.215, 1.33);
+  transition: transform 0.3s 0.25s cubic-bezier(0.455, 0.03, 0.215, 1.33);
 }
-
 .ios-switch.off .handle {
-  -o-animation: expand-off .3s 0.2s;
-  -ms-animation: expand-off .3s 0.2s;
-  -moz-animation: expand-off .3s 0.2s;
-  -webkit-animation: expand-off .3s 0.2s;
-  animation: expand-off .3s 0.2s;
+  -webkit-animation: expand-off 0.3s 0.2s;
+  -moz-animation: expand-off 0.3s 0.2s;
+  -o-animation: expand-off 0.3s 0.2s;
+  -ms-animation: expand-off 0.3s 0.2s;
+  animation: expand-off 0.3s 0.2s;
+  -webkit-transform: translate(0px, 0);
+  -moz-transform: translate(0px, 0);
+  -o-transform: translate(0px, 0);
+  -ms-transform: translate(0px, 0);
+  transform: translate(0px, 0);
+  -webkit-transform: translate3d(0px, 0, 0);
+  -moz-transform: translate3d(0px, 0, 0);
   -o-transform: translate3d(0px, 0, 0);
   -ms-transform: translate3d(0px, 0, 0);
-  -moz-transform: translate3d(0px, 0, 0);
-  -webkit-transform: translate3d(0px, 0, 0);
   transform: translate3d(0px, 0, 0);
 }
-
 .ios-switch.off .on-background {
-  -o-transition: .3s 0s;
-  -ms-transition: .3s 0s;
-  -moz-transition: .3s 0s;
-  -webkit-transition: .3s 0s;
-  transition: .3s 0s;
+  -webkit-transition: 0.3s 0s;
+  -moz-transition: 0.3s 0s;
+  -o-transition: 0.3s 0s;
+  -ms-transition: 0.3s 0s;
+  transition: 0.3s 0s;
 }
-
 .ios-switch.off .state-background {
-  -o-transition: .4s 0.25s;
-  -ms-transition: .4s 0.25s;
-  -moz-transition: .4s 0.25s;
-  -webkit-transition: .4s 0.25s;
-  transition: .4s 0.25s;
+  -webkit-transition: 0.4s 0.25s;
+  -moz-transition: 0.4s 0.25s;
+  -o-transition: 0.4s 0.25s;
+  -ms-transition: 0.4s 0.25s;
+  transition: 0.4s 0.25s;
 }
-
 .ios-switch.on .handle {
-  -o-animation: expand-on .3s 0.2s;
-  -ms-animation: expand-on .3s 0.2s;
-  -moz-animation: expand-on .3s 0.2s;
-  -webkit-animation: expand-on .3s 0.2s;
-  animation: expand-on .3s 0.2s;
+  -webkit-animation: expand-on 0.3s 0.2s;
+  -moz-animation: expand-on 0.3s 0.2s;
+  -o-animation: expand-on 0.3s 0.2s;
+  -ms-animation: expand-on 0.3s 0.2s;
+  animation: expand-on 0.3s 0.2s;
+  -webkit-transform: translate(30px, 0);
+  -moz-transform: translate(30px, 0);
+  -o-transform: translate(30px, 0);
+  -ms-transform: translate(30px, 0);
+  transform: translate(30px, 0);
+  -webkit-transform: translate3d(30px, 0, 0);
+  -moz-transform: translate3d(30px, 0, 0);
   -o-transform: translate3d(30px, 0, 0);
   -ms-transform: translate3d(30px, 0, 0);
-  -moz-transform: translate3d(30px, 0, 0);
-  -webkit-transform: translate3d(30px, 0, 0);
   transform: translate3d(30px, 0, 0);
 }
-
 .ios-switch.on .on-background {
   opacity: 1;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-  filter: alpha(opacity=100);
+  -ms-filter: none;
+  filter: none;
 }
-
 .ios-switch.on .state-background {
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
-  -moz-transform: scale(0);
-  -webkit-transform: scale(0);
   transform: scale(0);
 }
-
-@keyframes expand-on {
+@-moz-keyframes expand-on {
   0% {
     width: 41px;
   }
-
   40% {
     width: 50px;
   }
-
   100% {
     width: 41px;
   }
 }
-
-@keyframes expand-off {
+@-webkit-keyframes expand-on {
   0% {
     width: 41px;
-    left: 2px;
   }
-
   40% {
     width: 50px;
-    left: -7px;
   }
-
   100% {
     width: 41px;
-    left: 2px;
   }
 }
-
 @-o-keyframes expand-on {
   0% {
     width: 41px;
   }
-
-  40% {
-    width: 50px;
-  }
-
-  100% {
-    width: 41px;
-  }
-}
-
-@-ms-keyframes expand-on {
-  0% {
-    width: 41px;
-  }
-
-  40% {
-    width: 50px;
-  }
-
-  100% {
-    width: 41px;
-  }
-}
-
-@-moz-keyframes expand-on {
-  0% {
-    width: 41px;
-  }
-
   40% {
     width: 50px;
   }
-
   100% {
     width: 41px;
   }
 }
-
-@-webkit-keyframes expand-on {
+@keyframes expand-on {
   0% {
     width: 41px;
   }
-
   40% {
     width: 50px;
   }
-
   100% {
     width: 41px;
   }
 }
-
-@-o-keyframes expand-off {
+@-moz-keyframes expand-off {
   0% {
     width: 41px;
     left: 2px;
   }
-
   40% {
     width: 50px;
     left: -7px;
   }
-
   100% {
     width: 41px;
     left: 2px;
   }
 }
-
-@-ms-keyframes expand-off {
+@-webkit-keyframes expand-off {
   0% {
     width: 41px;
     left: 2px;
   }
-
   40% {
     width: 50px;
     left: -7px;
   }
-
   100% {
     width: 41px;
     left: 2px;
   }
 }
-
-@-moz-keyframes expand-off {
+@-o-keyframes expand-off {
   0% {
     width: 41px;
     left: 2px;
   }
-
   40% {
     width: 50px;
     left: -7px;
   }
-
   100% {
     width: 41px;
     left: 2px;
   }
 }
-
-@-webkit-keyframes expand-off {
+@keyframes expand-off {
   0% {
     width: 41px;
     left: 2px;
   }
-
   40% {
     width: 50px;
     left: -7px;
   }
-
   100% {
     width: 41px;
     left: 2px;
   }
-}
\ No newline at end of file
+}
diff --git a/ios7-switch.styl b/ios7-switch.styl
index c0292ed..28dd604 100644
--- a/ios7-switch.styl
+++ b/ios7-switch.styl
@@ -16,6 +16,7 @@
     top: 0
 
   .on-background
+    background: #00e158
     background-image: linear-gradient(#00e459, #00e158)
     opacity: 0
     z-index: 1
@@ -24,6 +25,7 @@
   .state-background
     border-radius: 100px
     z-index: 2
+    background: #FDFDFD
     background-image: linear-gradient(#ffffff, #FDFDFD)
     transition: .4s
     transform: scale(1)
@@ -41,12 +43,13 @@
     box-shadow: 0 0 3px 1px hsla(0, 0%, 0%, .075), 0 3px 5px hsla(0, 0%, 0%, .15), 1px 2px 2px hsla(0, 0%, 0%, .05)
     z-index: 3
     transition: transform .3s 0.25s cubic-bezier(0.455, 0.030, 0.215, 1.330)
-  
+
   &.off
     .handle
       animation: expand-off .3s 0.2s
+      transform: translate(0px, 0)
       transform: translate3d(0px, 0, 0)
-    
+
     .on-background
       transition: .3s 0s
 
@@ -56,11 +59,12 @@
   &.on
     .handle
       animation: expand-on .3s 0.2s
+      transform: translate(30px, 0)
       transform: translate3d(30px, 0, 0)
-    
+
     .on-background
       opacity: 1
-    
+
     .state-background
       transform: scale(0)
 
@@ -68,26 +72,26 @@
 @keyframes expand-on
   0%
     width: 41px
-  
+
   40%
     width: 50px
-  
+
   100%
     width: 41px
-  
+
 
 @keyframes expand-off
   0%
     width: 41px
     left: 2px
-  
+
   40%
     width: 50px
     left: -7px
-  
+
   100%
     width: 41px
     left: 2px
-  
+