由于转换样式覆盖模态：preserve-3d；

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 变换时，<div class="side-body"></div> 中元素的 z-index 属性无法再被解释为模态，它是背景 z-index 属性在您调用模式时没有像预期的那样生效。

方案一（推荐）

从 <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；

Overlay over modal due transform-style: preserve-3d;

html

css

transform

twitter-bootstrap