[英]Bug in CSS3 rotateY transition on Safari?
我正在展示一个使用 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;
}
据我所知,这是一个错误,是的,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);
}
我在尝试解决我在 Safari(Mac 和 iOS)中遇到的问题时发现了这个问题,其中 y 旋转的 svg 无明显原因仅显示其右半部分。
就我而言,svg 是固定位置 div 的子级,我发现父级上的position: fixed
和position: absolute
导致一半 svg 消失。
更改 z 索引、透视图和 translate-z 似乎都没有解决问题。 但随机地,在我的 svg 周围添加一个新的 div 并设置其背景颜色解决了这个问题。 我希望这有助于下一个人:)
在我的例子中,它起作用了transform: translateZ(0);
在父容器上。 object 本身就是一个图像。
就我而言,根据 Thomas 的建议,将z-index: 0
添加到父元素即可修复它。
上述解决方案都不适合我。 最后,这是 Chrome 以前拥有但已修复的 Safari rotate
错误。 这里的答案是为我解决的问题 - 使用scale()
而不是rotate()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.