我正在使用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正在渲染它不应该的交叉点.
一段时间I thought Safari is doing it right总是渲染元素的交集,但据我所知the specs,只有同一个3d rendering context中的元素应该相交,并且这将是具有变换样式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.5);
-webkit-transform: translateZ(-1000px);
}
