FIX: normalize transform usage, fix slideout on safari

app/assets/stylesheets/common/base/hamburger.scss

@@ -7,7 +7,7 @@
   height: 100%;
   overflow: auto;
   transition: 0.3s ease-in-out;
-  transform: translateX(0);
+  @include transform(translateX(0));
 
   box-shadow: 4px 0 4px 5px rgba(0,0,0, .25);
   padding: 0.5em 0.5em 0.5em 0.5em;
@@ -60,5 +60,5 @@
 }
 
 #hamburger-menu.slideright {
-  transform: translateX(330px);
+  @include transform(translateX(330px));
 }

app/assets/stylesheets/common/base/magnific-popup.scss

@@ -600,8 +600,7 @@ button {
 // Scale navigation arrows and reduce padding from sides
 @media all and (max-width: 900px) {
   .mfp-arrow {
-    transform: scale(0.75);
-    -webkit-transform: scale(0.75);
+    @include transform(scale(0.75));
   }
   .mfp-arrow-left {
     transform-origin: 0;
@@ -667,9 +666,7 @@ button {
   &.mfp-ready {
     .mfp-content {
       opacity: 1;
-      -webkit-transform: scale(1);
-          -ms-transform: scale(1);
-              transform: scale(1);
+      @include transform(scale(1));
     }
     &.mfp-bg {
       opacity: 0.8;
@@ -680,9 +677,7 @@ button {
   &.mfp-removing {
 
     .mfp-content {
-      -webkit-transform: scale(.8);
-          -ms-transform: scale(.8);
-              transform: scale(.8);
+      @include transform(scale(.8));
       opacity: 0;
     }
     &.mfp-bg {

app/assets/stylesheets/common/base/modal.scss

@@ -50,8 +50,8 @@
 }
 
 @-webkit-keyframes slidein {
-  from { transform: translateY(-20%); }
-    to { transform: translateY(0); }
+  from { -webkit-transform: translateY(-20%); }
+    to { -webkit-transform: translateY(0); }
 }
 
 .modal-outer-container {

app/assets/stylesheets/common/foundation/mixins.scss

@@ -100,3 +100,16 @@
   border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -85%);
   background-color: blend-primary-secondary(5%);
 }
+
+// We definately need -webkit for latest iPhone and Safari
+// When we deprecate IE9 we should clean up just to have webkit and non prefixed
+// ms is left around for ie9
+// moz is for firefox 15 (do we even work with that?)
+// -o would be for opera 11.5
+@mixin transform($transforms) {
+       -o-transform: $transforms;
+     -moz-transform: $transforms;
+	    -ms-transform: $transforms;
+	-webkit-transform: $transforms;
+          transform: $transforms;
+}

app/assets/stylesheets/desktop/user-card.scss

@@ -20,14 +20,11 @@ $user_card_background: #222;
           transition: opacity .2s, transform .2s;
 
   opacity: 0;
-  -webkit-transform: scale(.9);
-      -ms-transform: scale(.9);
-          transform: scale(.9);
+  @include transform(scale(.9));
+
   &.show {
     opacity: 1;
-    -webkit-transform: scale(1);
-        -ms-transform: scale(1);
-            transform: scale(1);
+    @include transform(scale(1));
   }
 
   .card-content {