Question

我正在测试这段代码，一般都可以正常使用。但是当我打开模态时我有一个小屏幕，那么我们在模态上有灰色覆盖。此问题与transform-style: preserve-3d;我需要使用此属性有关，因为我的问题要复杂得多。这个演示是最小的但是例证了这个问题。

所以，基本上我正试图解决这个错误，但我找不到任何办法。

问题：

/* Slide side body*/
    .side-body {
        ...
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .body-slide-in {
        ...
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

https://jsfiddle.net/c33mu5L2/

Answer 1

当您对案例<div class="side-body"></div>中的元素应用3D变换时，z-index中元素的<div class="side-body"></div>属性不再被视为模态和它＆＃39; s后台z-index属性在调用模态时没有生效。

解决方案1 （推荐）

从<div class="side-body"></div>内删除模态HTML并将其放在外面，问题将得到解决。

Fiddle

解决方案2

如果您不想将模态HTML放在<div class="side-body"></div>之外（使用您的原始方法），请添加

.side-body {
    -webkit-transform-style: preserve-3d(0,0,0);
    transform-style: preserve-3d(0,0,0);
}

到.side-body选择器，<div class="side-body"></div>内的元素不会丢失z-index属性。

Fiddle

注意：在上述两个解决方案中都可以使用transform-style: preserve-3d;但在第二个解决方案中可能存在使用transform-style: preserve-3d;的已知错误，在最新版本的Chrome上测试的第二个解决方案，FireFox和IE但在Safari上可能存在问题（不要让Safari进行测试）。

覆盖模态到期的变换风格：preserve-3d;

1 个答案: