14

我正在展示一个使用 CSS3 过渡的模式弹出窗口（主要是从Efeckt.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;
}
4

5 回答 5

34

据我所知，这是一个错误，是的，Safari 正在渲染不应出现的交叉点。

一段时间以来，我认为 Safari通过始终渲染元素的交集来做到这一点是正确的，但据我了解规范，只有同一3d 渲染上下文中的元素应该相交，这将是带有 a transform-styleof的元素的子元素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/

于 2013-08-11T00:19:20.970 回答
2

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

就我而言，svg 是固定位置 div 的子项，我发现父项position: fixed和position: absolute父项都导致一半 svg 消失。

更改 z 索引、透视图和 translate-z 似乎都不能解决问题。但是随机地，在我的 svg 周围添加一个新的 div 并设置它的背景色解决了这个问题。我希望这可以帮助下一个人:)

于 2020-01-05T06:05:49.570 回答
1

在我的情况下，z-index: 0根据 Thomas 的建议添加到父元素中修复了它。

于 2020-08-24T23:26:42.913 回答
1

上述解决方案都不适合我。最后，这是rotateChrome 之前在 Safari 上存在但已修复的错误。这里的答案是为我解决了它 - 使用scale()而不是rotate().

于 2021-02-07T11:45:23.493 回答
0

就我而言，它可以放在transform: translateZ(0);父容器上。对象本身就是一个图像。

于 2021-08-22T22:26:26.443 回答