fix(flip card): add prefixed backface-visibility property (#1658)

akveo · Jul 1, 2019 · 6373117 · 6373117
1 parent d16dcba
commit 6373117
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/src/framework/theme/components/card/flip-card/flip-card.component.scss b/src/framework/theme/components/card/flip-card/flip-card.component.scss
@@ -4,6 +4,13 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
+@mixin prefix-backface-visibility($value) {
+  backface-visibility: $value;
+  // Don't remove prefixed property as it's wouldn't be added during the build.
+  // Fixes back card visibility in Safari.
+  -webkit-backface-visibility: $value;
+}
+
 :host {
   display: block;
   perspective: 1200px;
@@ -17,7 +24,7 @@
     .front-container {
       opacity: 0;
       transition: opacity 0s 0.25s;
-      backface-visibility: hidden;
+      @include prefix-backface-visibility(hidden);
 
       .flip-button {
         opacity: 0;
@@ -26,7 +33,7 @@
     }
 
     .back-container {
-      backface-visibility: visible;
+      @include prefix-backface-visibility(visible);
     }
   }
 }
@@ -51,12 +58,12 @@
   }
 
   .front-container {
-    backface-visibility: visible;
+    @include prefix-backface-visibility(visible);
     transition: opacity 0s 0.2s;
   }
 
   .back-container {
-    backface-visibility: hidden;
+    @include prefix-backface-visibility(hidden);
     transform: rotateY(180deg);
   }
 }