Safari 上 CSS3 旋转 Y 转换存在错误？

Question

我正在展示一个使用 CSS3 转换的模式弹出窗口（很大程度上借用自 Effeckt.css）。它适用于除 Safari 之外的所有现代浏览器。在 Safari 中，移动效果正常，但背景颜色对齐不均匀。

这是代码，问题在 OSX 上的 Safari 中可见：http://jsfiddle.net/eJsZx/4/

问题自行解决之前的屏幕截图。您可以看到 div 的一半正确地设置为白色，一半仍然是透明的。

这是CSS的相关部分（单击按钮时应用

.effeckt-show

和

.md-effect-8

以显示模式）：

.effeckt-modal {
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  background: white;
}
.md-effect-8 {
  -webkit-perspective: 1300px;
  -ms-perspective: 1300px;
  -o-perspective: 1300px;
  perspective: 1300px;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.md-effect-8 .effeckt-modal {
  -webkit-transform: rotateY(-70deg);
  -ms-transform: rotateY(-70deg);
  -o-transform: rotateY(-70deg);
  transform: rotateY(-70deg);
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  opacity: 0;
}
.effeckt-show.md-effect-8 .effeckt-modal {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
}

Answer 1

据我所知，这是一个错误，是的，Safari 正在渲染不应该的交集。

有一段时间我认为 Safari 总是渲染元素的交集，这样做是正确的，但据我了解规范，只有同一 3d 渲染上下文中的元素才应该相交，而这将是 的子元素

transform-style

为

preserve-3d

的元素。

到目前为止，我发现的唯一解决方法（仅在 Windows 上进行了测试，但 Safari 显示了相同的行为）是将底层元素在 z 轴上平移。如果不应用透视，它实际上不会翻译，但 Safari/Webkit 似乎认为它会翻译（这可能是因为它错误地将元素视为与实际转换的对话框位于相同的 3D 渲染上下文中），因此元素不再相交。

.effeckt-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);

    -webkit-transform: translateZ(-1000px);
}

http://jsfiddle.net/eJsZx/5/

Answer 2

就我而言，将

transform: translateZ(0);

放在父容器上是有效的。物体本身就是一个图像。

Answer 3

我在尝试寻找 Safari（Mac 和 iOS）中遇到的问题的解决方案时发现了这个问题，其中 y 旋转的 svg 仅显示其右半部分，没有明显的原因。

在我的例子中，svg 是固定位置 div 的子级，我发现父级上的

position: fixed

和

position: absolute

导致一半 svg 消失。

更改 z 索引、透视图或 translate-z 似乎都无法解决问题。但随机地在我的 svg 周围添加一个新的 div 并设置其背景颜色解决了问题。我希望这对下一个人有帮助:)

Answer 4

在我的例子中，根据 Thomas 的建议，将

z-index: 0

添加到父元素修复了它。

Answer 5

上述解决方案都不适合我。最后，这是 Safari 上

rotate

的一个错误，Chrome 之前有但已修复。 这里的答案为我解决了这个问题 - 使用

scale()

而不是

rotate()

。

Answer 6

在 Y 方向平移 180 度的“后”侧元素上，我添加了 1px Z 平移，它修复了我的 Safari 错误。

transform: rotateY(180deg) translateZ(1px);

如果在 Safari 中前后元素处于相同的 z-index 中，则似乎存在此错误。

这里有一个 CodePen，您可以在其中删除然后

translateZ(1px)

并观察错误的出现。在我的示例中，元素的背面有“输入”和“按钮”，而输入和按钮的左半部分由于 Safari 错误而不起作用。

请参阅此处的工作代码示例：

Codepen 示例