From 8dc4a39a0332643a8b3252d94d7e4e18e2e1e09e Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 30 Mar 2018 18:14:28 +0200
Subject: [PATCH] Fix - Stacking context gets disturbed

---
 src/core/element.js |  4 ++++
 src/driver.scss     | 12 +++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/core/element.js b/src/core/element.js
index 535fb7d..4b17000 100644
--- a/src/core/element.js
+++ b/src/core/element.js
@@ -247,6 +247,8 @@ export default class Element {
       const zIndex = getStyleProperty(parentNode, 'z-index');
       const opacity = parseFloat(getStyleProperty(parentNode, 'opacity'));
       const transform = getStyleProperty(parentNode, 'transform', true);
+      const transformStyle = getStyleProperty(parentNode, 'transform-style', true);
+      const transformBox = getStyleProperty(parentNode, 'transform-box', true);
       const filter = getStyleProperty(parentNode, 'filter', true);
       const perspective = getStyleProperty(parentNode, 'perspective', true);
 
@@ -258,6 +260,8 @@ export default class Element {
         /[0-9]+/.test(zIndex) ||
         opacity < 1 ||
         (transform && transform !== 'none') ||
+        (transformStyle && transformStyle !== 'flat') ||
+        (transformBox && transformBox !== 'border-box') ||
         (filter && filter !== 'none') ||
         (perspective && perspective !== 'none')
       ) {
diff --git a/src/driver.scss b/src/driver.scss
index d019eac..ba4c0c3 100644
--- a/src/driver.scss
+++ b/src/driver.scss
@@ -182,22 +182,28 @@ div#driver-highlighted-element-stage {
 .driver-fix-stacking {
   z-index: auto !important;
   opacity: 1.0 !important;
-
   -webkit-transform: none !important;
   -moz-transform: none !important;
   -ms-transform: none !important;
   -o-transform: none !important;
   transform: none !important;
-
   -webkit-filter: none !important;
   -moz-filter: none !important;
   -ms-filter: none !important;
   -o-filter: none !important;
   filter: none !important;
-
   -webkit-perspective: none !important;
   -moz-perspective: none !important;
   -ms-perspective: none !important;
   -o-perspective: none !important;
   perspective: none !important;
+  -webkit-transform-style: flat !important;
+  -moz-transform-style: flat !important;
+  -ms-transform-style: flat !important;
+  transform-style: flat !important;
+  -webkit-transform-box: border-box !important;
+  -moz-transform-box: border-box !important;
+  -ms-transform-box: border-box !important;
+  -o-transform-box: border-box !important;
+  transform-box: border-box !important;
 }
\ No newline at end of file