Added webkit prefixes where required, adds support for chrome, safari, mobile chrome and mobile safari, fixes issue #329

src/less/components/checkbox.less

@@ -10,11 +10,14 @@
       position: absolute;
       opacity: 0;
       transform: scale(0);
+      -webkit-transform: scale(0);
       transform-origin: 50% 50%;
+      -webkit-transform-origin: 50% 50%;
 
       transition:
         opacity 450ms @ease-out-function 0ms,
-        transform 0ms @ease-out-function 450ms;
+        transform 0ms @ease-out-function 450ms,
+        -webkit-transform 0ms @ease-out-function 450ms;
 
       * { fill: @checkbox-checked-color; }
     }
@@ -34,11 +37,14 @@
         .ease-out(@duration: .45s; @delay: 0s);
         opacity: 1;
         transform: scale(1);
+        -webkit-transform: scale(1);
         transform-origin: 50% 50%; 
+        -webkit-transform-origin: 50% 50%; 
 
         transition:
           opacity 0ms @ease-out-function 0ms,
-          transform 800ms @ease-out-function 0ms;
+          transform 800ms @ease-out-function 0ms,
+          -webkit-transform 800ms @ease-out-function 0ms;
       }
       .mui-checkbox-box {
         .ease-out(@duration: 100s; @delay: 0ms);

src/less/components/date-picker/day-button.less

@@ -12,6 +12,7 @@
     opacity: 0;
     border-radius: 50%;
     transform: scale(0);
+    -webkit-transform: scale(0);
     .ease-out();
   }
 
@@ -26,6 +27,7 @@
     .mui-date-picker-day-button-select {
       opacity: 1;
       transform: scale(1);
+      -webkit-transform: scale(1);
     }
   }
 

src/less/components/dialog-window.less

@@ -37,6 +37,7 @@
       opacity: 1;
       top: 0px;
       transform: translate3d(0, @desktop-keyline-increment, 0);
+      -webkit-transform: translate3d(0, @desktop-keyline-increment, 0);
     }
   }
 }

src/less/components/enhanced-textarea.less

@@ -11,6 +11,7 @@
 
   .mui-enhanced-textarea-shadow {
     transform: scale(0);
+    -webkit-transform: scale(0);
     position: absolute;
   }
 }

src/less/components/flat-button.less

@@ -18,6 +18,7 @@
   //past border radius.
   //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
   transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
 
   .mui-touch-ripple {
     .mui-ripple-circle-inner {

src/less/components/floating-action-button.less

@@ -17,6 +17,7 @@
     //past border radius.
     //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
     transform: translate3d(0, 0, 0);
+    -webkit-transform: translate3d(0, 0, 0);
 
     &.mui-is-disabled {
       background-color: @floating-action-button-disabled-color;

src/less/components/left-nav.less

@@ -26,6 +26,7 @@
   &.mui-closed {
     .mui-left-nav-menu {
       transform: translate3d((-1 * @left-nav-width) - 10px, 0, 0);
+      -webkit-transform: translate3d((-1 * @left-nav-width) - 10px, 0, 0);
     }
   }
 }

src/less/components/radio-button.less

@@ -11,7 +11,9 @@
       position: absolute;
       opacity: 0;
       transform: scale(0);
+      -webkit-transform: scale(0);
       transform-origin: 50% 50%;
+      -webkit-transform-origin: 50% 50%;
       .ease-out;
       * { fill: @radio-button-checked-color; }
     }
@@ -21,6 +23,7 @@
       position: absolute;
       opacity: 1;
       transform: scale(1);
+      -webkit-transform: scale(1);
       * {
         fill: @radio-button-border-color;
         .ease-out(@duration: 2s; @delay: 200ms);
@@ -33,11 +36,13 @@
       .mui-radio-button-fill {
         opacity: 1;
         transform: scale(1);
+        -webkit-transform: scale(1);
       }
 
       .mui-radio-button-target {
         opacity: 0;
         transform: scale(0);
+        -webkit-transform: scale(0);
         * { 
           fill: @radio-button-checked-color; 
           .ease-out(@duration: 100s; @delay: 0ms);

src/less/components/raised-button.less

@@ -18,6 +18,7 @@
     //past border radius.
     //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
     transform: translate3d(0, 0, 0);
+    -webkit-transform: translate3d(0, 0, 0);
 
     &.mui-is-keyboard-focused {
       background-color: @raised-button-hover-color;

src/less/components/ripples/circle.less

@@ -11,15 +11,18 @@
     height: 100%;
     width: 100%;
     border-radius: 50%;
+    -webkit-transform: scale(0);
     transform: scale(0);
     background-color: rgba(0,0,0,0.2);
+    .ease-out(@property: -webkit-transform; @duration: 1s);
     .ease-out(@property: transform; @duration: 1s);
   }
 
   &.mui-is-started {
     opacity: 1;
 
     .mui-ripple-circle-inner {
+      -webkit-transform: scale(1);
       transform: scale(1);
     }
   }

src/less/components/ripples/focus-ripple.less

@@ -6,6 +6,7 @@
   left: 0;
 
   .ease-out();
+  -webkit-transform: scale(0);
   transform: scale(0);
   opacity: 0;
 
@@ -24,6 +25,7 @@
   }
 
   &.mui-is-shown {
+    -webkit-transform: scale(1);
     transform: scale(1);
     opacity: 1;
   }

src/less/components/slider.less

@@ -62,6 +62,7 @@
 
     background-clip: padding-box;
     border-radius: 50%;
+    -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     transition:
       border 450ms @ease-out-function,

src/less/components/snackbar.less

@@ -16,6 +16,7 @@
 
   left: -10000px;
   opacity: 0;
+  -webkit-transform: translate3d(0, 20px, 0);
   transform: translate3d(0, 20px, 0);
   transition:
     left 0ms @ease-out-function 400ms,
@@ -34,6 +35,7 @@
   &.mui-is-open {
     left: 0;
     opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     transition:
       left 0ms @ease-out-function 0ms,

src/less/components/text-field.less

@@ -57,13 +57,15 @@
   .mui-text-field-focus-underline {
     border-color: @primary-1-color;
     border-bottom-width: 2px;
+    -webkit-transform: scaleX(0);
     transform: scaleX(0);
     .ease-out();
   }
 
   &.mui-has-error {
     .mui-text-field-focus-underline {
       border-color: @error-color;
+      -webkit-transform: scaleX(1);
       transform: scaleX(1);
     }
   }
@@ -98,6 +100,7 @@
 
   &.mui-is-focused {
     .mui-text-field-focus-underline {
+      -webkit-transform: scaleX(1);
       transform: scaleX(1);
     }
   }
@@ -109,7 +112,9 @@
 
     .mui-text-field-floating-label {
       top: 24px;
+      -webkit-transform: scale(1) translate3d(0, 0, 0);
       transform: scale(1) translate3d(0, 0, 0);
+      -webkit-transform-origin: left top;
       transform-origin: left top;
     }
 
@@ -125,6 +130,7 @@
     &.mui-has-value,
     &.mui-is-focused {
       .mui-text-field-floating-label {
+        -webkit-transform: scale(0.75) translate3d(0, -18px, 0);
         transform: scale(0.75) translate3d(0, -18px, 0);
       }
     }
@@ -148,6 +154,7 @@
       }
 
       .mui-text-field-floating-label {
+        -webkit-transform: scale(0.75) translate3d(0, -18px, 0);
         transform: scale(0.75) translate3d(0, -18px, 0);
         color: @primary-1-color;
       }

src/less/components/tooltip.less

@@ -15,6 +15,7 @@
 
   transition:
     top 0ms @ease-out-function 450ms,
+    -webkit-transform 450ms @ease-out-function 0ms,
     transform 450ms @ease-out-function 0ms,
     opacity 450ms @ease-out-function 0ms;
 
@@ -28,6 +29,7 @@
     left: 50%;
     top: 0px;
 
+    -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     border-radius: 50%;
     background-color: transparent;
@@ -41,10 +43,12 @@
   &.mui-is-shown {
     top: -16px;
     opacity: 1;
+    -webkit-transform: translate3d(0px, 16px, 0px);
     transform: translate3d(0px, 16px, 0px);
 
     transition:
       top 0ms @ease-out-function 0ms, 
+      -webkit-transform 450ms @ease-out-function 0ms,
       transform 450ms @ease-out-function 0ms,
       opacity 450ms @ease-out-function 0ms;
 

src/less/components/transition-groups/slide-in.less

@@ -30,61 +30,77 @@
 
   &.mui-is-left {
     .mui-transition-slide-in-enter {
+      -webkit-transform: translate3d(100%,0,0);
       transform: translate3d(100%,0,0);
     }
     .mui-transition-slide-in-enter-active {
+      -webkit-transform: translate3d(0,0,0);
       transform: translate3d(0,0,0);
     }
     .mui-transition-slide-in-leave {
+      -webkit-transform: translate3d(0,0,0);
       transform: translate3d(0,0,0);
     }
     .mui-transition-slide-in-leave-active {
+      -webkit-transform: translate3d(-100%,0,0);
       transform: translate3d(-100%,0,0);
     }
 
   }
 
   &.mui-is-right {
     .mui-transition-slide-in-enter {
+      -webkit-transform: translate3d(-100%,0,0);
       transform: translate3d(-100%,0,0);
     }
     .mui-transition-slide-in-enter-active {
+      -webkit-transform: translate3d(0,0,0);
       transform: translate3d(0,0,0);
     }
     .mui-transition-slide-in-leave {
+      -webkit-transform: translate3d(0,0,0);
       transform: translate3d(0,0,0);
     }
     .mui-transition-slide-in-leave-active {
+      -webkit-transform: translate3d(100%,0,0);
       transform: translate3d(100%,0,0);
     }
   }
 
   &.mui-is-up {
     .mui-transition-slide-in-enter {
+      -webkit-transform: translate3d(0,100%,0);
       transform: translate3d(0,100%,0);
     }
     .mui-transition-slide-in-enter-active {
+      -webkit-transform: translate3d(0,0,0);
       transform: translate3d(0,0,0);
     }
     .mui-transition-slide-in-leave {
+      -webkit-transform: translate3d(0,0,0);
       transform: translate3d(0,0,0);
     }
     .mui-transition-slide-in-leave-active {
+      -webkit-transform: translate3d(0,-100%,0);
       transform: translate3d(0,-100%,0);
     }
   }
 
   &.mui-is-down {
     .mui-transition-slide-in-enter {
+      -webkit-transform: translate3d(0,-100%,0);
       transform: translate3d(0,-100%,0);
     }
     .mui-transition-slide-in-enter-active {
+      -webkit-transform: translate3d(0,0,0);
       transform: translate3d(0,0,0);
     }
     .mui-transition-slide-in-leave {
+      -webkit-transform: translate3d(0,0,0);
       transform: translate3d(0,0,0);
     }
     .mui-transition-slide-in-leave-active {
+      -webkit-transform: translate3d(0,100%,0);
       transform: translate3d(0,100%,0);
     }
   }

src/less/mixins/transitions.less

@@ -7,11 +7,14 @@
 .pulsate(@animation-name; @start-size: 0.75; @end-size: 1; @duration: 1.5s) {
   @keyframes ~"@{animation-name}" {
     0%, 100% {
+      -webkit-transform: scale(@start-size);
       transform: scale(@start-size);
     }
     50% {
+      -webkit-transform: scale(@end-size);
       transform: scale(@end-size);
     }
   }  
   animation: @animation-name @duration ease 0s infinite;
+  -webkit-animation: @animation-name @duration ease 0s infinite;
 }