fix(flipcard): fix flip card back view in Safari and IE

akveo · Jul 25, 2018 · 0ccb4ab · 0ccb4ab
1 parent ee6d2e8
commit 0ccb4ab
Showing 1 changed file with 39 additions and 23 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
@@ -8,39 +8,55 @@
   display: block;
   perspective: 1200px;
   position: relative;
+}
 
-  &.flipped {
-    .flipcard-body {
-      transform: rotateY(180deg);
-
-      .front-container .flip-button {
-        opacity: 0;
-      }
-    }
-  }
-
+:host-context(.flipped) {
   .flipcard-body {
-    display: flex;
-    transition: transform 0.5s;
-    transform-style: preserve-3d;
+    transform: rotateY(-180deg);
 
-    .front-container,
-    .back-container {
+    .front-container {
+      opacity: 0;
+      transition: opacity 0s 0.25s;
       backface-visibility: hidden;
-      flex: 1;
 
       .flip-button {
-        cursor: pointer;
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        opacity: 1;
-        transition: opacity 0s 0.15s;
+        opacity: 0;
+        z-index: -1;
       }
     }
 
     .back-container {
-      transform: rotateY(180deg);
+      backface-visibility: visible;
     }
   }
 }
+
+.flipcard-body {
+  display: flex;
+  transition: transform 0.5s;
+  transform-style: preserve-3d;
+
+  .front-container,
+  .back-container {
+    flex: 1;
+
+    .flip-button {
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      opacity: 1;
+      transition: opacity 0s 0.15s;
+    }
+  }
+
+  .front-container {
+    backface-visibility: visible;
+    transition: opacity 0s 0.2s;
+  }
+
+  .back-container {
+    backface-visibility: hidden;
+    transform: rotateY(180deg);
+  }
+}