Safari上的CSS3 rotateY过渡中的错误？

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正在渲染它应该不会的交叉点。

总有一段时间I thought Safari is doing it right渲染元素的交集，但就我所理解的the specs而言，只有相同3d rendering context中的元素应该相交，那将是元素的子元素使用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

就我而言，根据托马斯的建议，在父元素中添加z-index: 0可以解决该问题。

Answer 3

以上解决方案都不适合我。最后，这是 Safari 上 rotate 的一个错误，Chrome 以前有但已修复。 The answer here 为我解决了这个问题 - 使用 scale() 而不是 rotate()。

Answer 4

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

在我的情况下，svg是固定位置div的子级，我发现父级上的position: fixed和position: absolute导致一半的svg消失。

更改z索引，透视图或转换-z似乎都不能解决问题。但是随机地，在我的svg周围添加一个新的div并设置其背景颜色可以解决该问题。我希望这可以帮助下一个人：）