kamrify commited on
Commit
7a731b1
·
1 Parent(s): 1a68d34

Fix - Stacking context gets disturbed

Browse files
Files changed (2) hide show
  1. src/core/element.js +4 -0
  2. 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
  }