Fix - Stacking context gets disturbed
Browse files- src/core/element.js +4 -0
- src/driver.scss +9 -3
src/core/element.js
CHANGED
|
@@ -247,6 +247,8 @@ export default class Element {
|
|
| 247 |
const zIndex = getStyleProperty(parentNode, 'z-index');
|
| 248 |
const opacity = parseFloat(getStyleProperty(parentNode, 'opacity'));
|
| 249 |
const transform = getStyleProperty(parentNode, 'transform', true);
|
|
|
|
|
|
|
| 250 |
const filter = getStyleProperty(parentNode, 'filter', true);
|
| 251 |
const perspective = getStyleProperty(parentNode, 'perspective', true);
|
| 252 |
|
|
@@ -258,6 +260,8 @@ export default class Element {
|
|
| 258 |
/[0-9]+/.test(zIndex) ||
|
| 259 |
opacity < 1 ||
|
| 260 |
(transform && transform !== 'none') ||
|
|
|
|
|
|
|
| 261 |
(filter && filter !== 'none') ||
|
| 262 |
(perspective && perspective !== 'none')
|
| 263 |
) {
|
|
|
|
| 247 |
const zIndex = getStyleProperty(parentNode, 'z-index');
|
| 248 |
const opacity = parseFloat(getStyleProperty(parentNode, 'opacity'));
|
| 249 |
const transform = getStyleProperty(parentNode, 'transform', true);
|
| 250 |
+
const transformStyle = getStyleProperty(parentNode, 'transform-style', true);
|
| 251 |
+
const transformBox = getStyleProperty(parentNode, 'transform-box', true);
|
| 252 |
const filter = getStyleProperty(parentNode, 'filter', true);
|
| 253 |
const perspective = getStyleProperty(parentNode, 'perspective', true);
|
| 254 |
|
|
|
|
| 260 |
/[0-9]+/.test(zIndex) ||
|
| 261 |
opacity < 1 ||
|
| 262 |
(transform && transform !== 'none') ||
|
| 263 |
+
(transformStyle && transformStyle !== 'flat') ||
|
| 264 |
+
(transformBox && transformBox !== 'border-box') ||
|
| 265 |
(filter && filter !== 'none') ||
|
| 266 |
(perspective && perspective !== 'none')
|
| 267 |
) {
|
src/driver.scss
CHANGED
|
@@ -182,22 +182,28 @@ div#driver-highlighted-element-stage {
|
|
| 182 |
.driver-fix-stacking {
|
| 183 |
z-index: auto !important;
|
| 184 |
opacity: 1.0 !important;
|
| 185 |
-
|
| 186 |
-webkit-transform: none !important;
|
| 187 |
-moz-transform: none !important;
|
| 188 |
-ms-transform: none !important;
|
| 189 |
-o-transform: none !important;
|
| 190 |
transform: none !important;
|
| 191 |
-
|
| 192 |
-webkit-filter: none !important;
|
| 193 |
-moz-filter: none !important;
|
| 194 |
-ms-filter: none !important;
|
| 195 |
-o-filter: none !important;
|
| 196 |
filter: none !important;
|
| 197 |
-
|
| 198 |
-webkit-perspective: none !important;
|
| 199 |
-moz-perspective: none !important;
|
| 200 |
-ms-perspective: none !important;
|
| 201 |
-o-perspective: none !important;
|
| 202 |
perspective: none !important;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 203 |
}
|
|
|
|
| 182 |
.driver-fix-stacking {
|
| 183 |
z-index: auto !important;
|
| 184 |
opacity: 1.0 !important;
|
|
|
|
| 185 |
-webkit-transform: none !important;
|
| 186 |
-moz-transform: none !important;
|
| 187 |
-ms-transform: none !important;
|
| 188 |
-o-transform: none !important;
|
| 189 |
transform: none !important;
|
|
|
|
| 190 |
-webkit-filter: none !important;
|
| 191 |
-moz-filter: none !important;
|
| 192 |
-ms-filter: none !important;
|
| 193 |
-o-filter: none !important;
|
| 194 |
filter: none !important;
|
|
|
|
| 195 |
-webkit-perspective: none !important;
|
| 196 |
-moz-perspective: none !important;
|
| 197 |
-ms-perspective: none !important;
|
| 198 |
-o-perspective: none !important;
|
| 199 |
perspective: none !important;
|
| 200 |
+
-webkit-transform-style: flat !important;
|
| 201 |
+
-moz-transform-style: flat !important;
|
| 202 |
+
-ms-transform-style: flat !important;
|
| 203 |
+
transform-style: flat !important;
|
| 204 |
+
-webkit-transform-box: border-box !important;
|
| 205 |
+
-moz-transform-box: border-box !important;
|
| 206 |
+
-ms-transform-box: border-box !important;
|
| 207 |
+
-o-transform-box: border-box !important;
|
| 208 |
+
transform-box: border-box !important;
|
| 209 |
}
|