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 |
}
|