From 0ccb4ab0ddc3d8eb9f79600cad7bef51d66e6672 Mon Sep 17 00:00:00 2001
From: Denis Strigo <denis2295@gmail.com>
Date: Wed, 25 Jul 2018 15:26:07 +0300
Subject: [PATCH] fix(flipcard): fix flip card back view in Safari and IE

---
 .../card/flip-card/flip-card.component.scss   | 62 ++++++++++++-------
 1 file changed, 39 insertions(+), 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
index 4684142d5b..b0096cd129 100644
--- 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);
+  }
+}