stop using the mixin for transform transitions. mixin breaks

dist/ratchet-theme-android.css

@@ -448,14 +448,14 @@ textarea,
   margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
+  -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
+  -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
+  transition: transform .1s ease-in-out, opacity .2s ease-in-out;
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   -webkit-transform: scale(0.75);
   -ms-transform: scale(0.75);
   transform: scale(0.75);
-  -webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  -moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:before {
   display: none;

dist/ratchet-theme-ios.css

@@ -361,9 +361,12 @@ textarea,
 
 .popover {
   border-radius: 12px;
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
+  -moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;
+  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:before {
   border-bottom: 15px solid rgba(247, 247, 247, 0.98);
@@ -408,11 +411,11 @@ textarea,
 }
 .toggle .toggle-handle {
   border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-transition-property: -webkit-transform, border, width;
+  -moz-transition-property: -moz-transform, border, width;
+  transition-property: transform, border, width;
   -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-  -webkit-transition-property: -webkit-transform, border, width;
-  -moz-transition-property: -webkit-transform, border, width;
-  transition-property: -webkit-transform, border, width;
 }
 .toggle:before {
   display: none;

dist/ratchet.css

@@ -1072,22 +1072,22 @@ select {
   min-height: 100%;
   overflow: hidden;
   background-color: #fff;
+  -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
+  -moz-transition: -moz-transform .25s, opacity 1ms .25s;
+  transition: transform .25s, opacity 1ms .25s;
   -webkit-transform: translate3d(0, 100%, 0);
   -ms-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
-  -webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
-  -moz-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
-  transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
 }
 .modal.active {
   opacity: 1;
   height: 100%;
+  -webkit-transition: -webkit-transform .25s;
+  -moz-transition: -moz-transform .25s;
+  transition: transform .25s;
   -webkit-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
-  -webkit-transition: -webkit-transform 0.25s;
-  -moz-transition: -webkit-transform 0.25s;
-  transition: -webkit-transform 0.25s;
 }
 
 .slider {
@@ -1140,8 +1140,8 @@ select {
   border: 1px solid #ddd;
   border-radius: 100px;
   -webkit-transition-property: -webkit-transform, border, width;
-  -moz-transition-property: -webkit-transform, border, width;
-  transition-property: -webkit-transform, border, width;
+  -moz-transition-property: -moz-transform, border, width;
+  transition-property: transform, border, width;
   -webkit-transition-duration: 0.2s;
   -moz-transition-duration: 0.2s;
   transition-duration: 0.2s;
@@ -1184,9 +1184,9 @@ select {
 }
 .content.sliding {
   z-index: 2;
-  -webkit-transition: -webkit-transform 0.4s;
-  -moz-transition: -webkit-transform 0.4s;
-  transition: -webkit-transform 0.4s;
+  -webkit-transition: -webkit-transform .4s;
+  -moz-transition: -moz-transform .4s;
+  transition: transform .4s;
   -webkit-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);

docs/assets/css/docs.css

@@ -355,12 +355,12 @@ body {
   height: 44px;
   background-color: #fff;
   border-bottom: 1px solid #ddd;
+  -webkit-transition: -webkit-transform .5s;
+  -moz-transition: -moz-transform .5s;
+  transition: transform .5s;
   -webkit-transform: translate3d(0, -55px, 0);
   -ms-transform: translate3d(0, -55px, 0);
   transform: translate3d(0, -55px, 0);
-  -webkit-transition: -webkit-transform 0.5s;
-  -moz-transition: -webkit-transform 0.5s;
-  transition: -webkit-transform 0.5s;
 }
 .docs-component-toolbar.visible {
   -webkit-transform: translateY(0);
@@ -379,7 +379,7 @@ body {
 }
 
 .docs-examples {
-  margin-top: 30px;
+  margin-top: 50px;
   margin-bottom: 50px;
 }
 
@@ -1439,9 +1439,12 @@ hr {
 }
 .platform-ios .popover {
   border-radius: 12px;
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
+  -moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;
+  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .platform-ios .popover:before {
   border-bottom: 15px solid rgba(247, 247, 247, 0.98);
@@ -1481,11 +1484,11 @@ hr {
 }
 .platform-ios .toggle .toggle-handle {
   border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-transition-property: -webkit-transform, border, width;
+  -moz-transition-property: -moz-transform, border, width;
+  transition-property: transform, border, width;
   -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-  -webkit-transition-property: -webkit-transform, border, width;
-  -moz-transition-property: -webkit-transform, border, width;
-  transition-property: -webkit-transform, border, width;
 }
 .platform-ios .toggle:before {
   display: none;
@@ -1940,14 +1943,14 @@ hr {
   margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
+  -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
+  -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
+  transition: transform .1s ease-in-out, opacity .2s ease-in-out;
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   -webkit-transform: scale(0.75);
   -ms-transform: scale(0.75);
   transform: scale(0.75);
-  -webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  -moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .platform-android .popover:before {
   display: none;

docs/dist/ratchet-theme-android.css

@@ -448,14 +448,14 @@ textarea,
   margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
+  -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
+  -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
+  transition: transform .1s ease-in-out, opacity .2s ease-in-out;
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   -webkit-transform: scale(0.75);
   -ms-transform: scale(0.75);
   transform: scale(0.75);
-  -webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  -moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:before {
   display: none;

docs/dist/ratchet-theme-ios.css

@@ -361,9 +361,12 @@ textarea,
 
 .popover {
   border-radius: 12px;
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
+  -moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;
+  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:before {
   border-bottom: 15px solid rgba(247, 247, 247, 0.98);
@@ -408,11 +411,11 @@ textarea,
 }
 .toggle .toggle-handle {
   border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-transition-property: -webkit-transform, border, width;
+  -moz-transition-property: -moz-transform, border, width;
+  transition-property: transform, border, width;
   -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-  -webkit-transition-property: -webkit-transform, border, width;
-  -moz-transition-property: -webkit-transform, border, width;
-  transition-property: -webkit-transform, border, width;
 }
 .toggle:before {
   display: none;

docs/dist/ratchet.css

@@ -1072,22 +1072,22 @@ select {
   min-height: 100%;
   overflow: hidden;
   background-color: #fff;
+  -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
+  -moz-transition: -moz-transform .25s, opacity 1ms .25s;
+  transition: transform .25s, opacity 1ms .25s;
   -webkit-transform: translate3d(0, 100%, 0);
   -ms-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
-  -webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
-  -moz-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
-  transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
 }
 .modal.active {
   opacity: 1;
   height: 100%;
+  -webkit-transition: -webkit-transform .25s;
+  -moz-transition: -moz-transform .25s;
+  transition: transform .25s;
   -webkit-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
-  -webkit-transition: -webkit-transform 0.25s;
-  -moz-transition: -webkit-transform 0.25s;
-  transition: -webkit-transform 0.25s;
 }
 
 .slider {
@@ -1140,8 +1140,8 @@ select {
   border: 1px solid #ddd;
   border-radius: 100px;
   -webkit-transition-property: -webkit-transform, border, width;
-  -moz-transition-property: -webkit-transform, border, width;
-  transition-property: -webkit-transform, border, width;
+  -moz-transition-property: -moz-transform, border, width;
+  transition-property: transform, border, width;
   -webkit-transition-duration: 0.2s;
   -moz-transition-duration: 0.2s;
   transition-duration: 0.2s;
@@ -1184,9 +1184,9 @@ select {
 }
 .content.sliding {
   z-index: 2;
-  -webkit-transition: -webkit-transform 0.4s;
-  -moz-transition: -webkit-transform 0.4s;
-  transition: -webkit-transform 0.4s;
+  -webkit-transition: -webkit-transform .4s;
+  -moz-transition: -moz-transform .4s;
+  transition: transform .4s;
   -webkit-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);

sass/docs.scss

@@ -352,8 +352,10 @@ body {
   height: 44px;
   background-color: #fff;
   border-bottom: 1px solid #ddd;
+  -webkit-transition: -webkit-transform .5s;
+     -moz-transition: -moz-transform .5s;
+          transition: transform .5s;
   @include transform(translate3d(0, -55px, 0));
-  @include transition(-webkit-transform .5s);
 
   &.visible {
     @include transform(translateY(0));
@@ -374,7 +376,7 @@ body {
 // --------------------------------------------------
 
 .docs-examples {
-  margin-top: 30px;
+  margin-top: 50px;
   margin-bottom: 50px;
 }
 .docs-example-group {

sass/modals.scss

@@ -11,14 +11,18 @@
   min-height: 100%;
   overflow: hidden;
   background-color: #fff;
+  -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
+     -moz-transition: -moz-transform .25s, opacity 1ms .25s;
+          transition: transform .25s, opacity 1ms .25s;
   @include transform(translate3d(0, 100%, 0));
-  @include transition(-webkit-transform .25s, opacity 1ms .25s);
 
   // Active modal
   &.active {
     opacity: 1;
     height: 100%;
+    -webkit-transition: -webkit-transform .25s;
+       -moz-transition: -moz-transform .25s;
+            transition: transform .25s;
     @include transform(translate3d(0, 0, 0));
-    @include transition(-webkit-transform .25s);
   }
 }

sass/push.scss

@@ -16,7 +16,9 @@
   // Slide animation
   &.sliding {
     z-index: 2;
-    @include transition(-webkit-transform .4s);
+    -webkit-transition: -webkit-transform .4s;
+       -moz-transition: -moz-transform .4s;
+            transition: transform .4s;
     @include transform(translate3d(0, 0, 0));
 
     &.left {

sass/theme-android.scss

@@ -607,9 +607,11 @@ textarea,
   margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
+  -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
+     -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
+          transition: transform .1s ease-in-out, opacity .2s ease-in-out;
   @include box-shadow(0 0 3px rgba(0,0,0,.2));
   @include transform(scale(.75));
-  @include transition(-webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
 
   &:before {
     display: none;

sass/theme-ios.scss

@@ -479,7 +479,10 @@ textarea,
 
 .popover {
   border-radius: 12px;
-  @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
+  -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
+     -moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;
+          transition: transform .2s ease-in-out, opacity .2s ease-in-out;
+  @include transition(-webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
 
   &:before {
     border-bottom: 15px solid $chrome-color;
@@ -528,8 +531,10 @@ textarea,
   // Sliding handle
   .toggle-handle {
     border: 1px solid rgba(0, 0, 0, .2);
+    -webkit-transition-property: -webkit-transform, border, width;
+       -moz-transition-property: -moz-transform, border, width;
+            transition-property: transform, border, width;
     @include box-shadow(0 3px 3px rgba(0,0,0,.08));
-    @include transition-property(-webkit-transform, border, width);
   }
   &:before {
     display: none;

sass/toggles.scss

@@ -24,7 +24,9 @@
     background-color: #fff;
     border: 1px solid #ddd;
     border-radius: 100px;
-    @include transition-property(-webkit-transform, border, width);
+    -webkit-transition-property: -webkit-transform, border, width;
+       -moz-transition-property: -moz-transform, border, width;
+            transition-property: transform, border, width;
     @include transition-duration(.2s);
   }
   &:before {