From a7d1c220e1a12a254c9901d650a73cd506f050a2 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Wed, 26 Aug 2015 09:58:37 +1000
Subject: [PATCH] FIX: normalize transform usage, fix slideout on safari

---
 app/assets/stylesheets/common/base/hamburger.scss   |  4 ++--
 .../stylesheets/common/base/magnific-popup.scss     | 11 +++--------
 app/assets/stylesheets/common/base/modal.scss       |  4 ++--
 .../stylesheets/common/foundation/mixins.scss       | 13 +++++++++++++
 app/assets/stylesheets/desktop/user-card.scss       |  9 +++------
 5 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/common/base/hamburger.scss b/app/assets/stylesheets/common/base/hamburger.scss
index ba078a5a353..b73a8b4a1d9 100644
--- a/app/assets/stylesheets/common/base/hamburger.scss
+++ b/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));
 }
diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
index 3aa7f39eb4d..b37047cb0c4 100644
--- a/app/assets/stylesheets/common/base/magnific-popup.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index ee8de426b20..7674cd42f86 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 1770d524d4a..55b15a9b537 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/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;
+}
diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss
index bb9c61b5151..01c26e83817 100644
--- a/app/assets/stylesheets/desktop/user-card.scss
+++ b/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 {