相关疑难解决方法(0)

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

我正在使用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: …
Run Code Online (Sandbox Code Playgroud)

safari css3 css-transitions

11
推荐指数
1
解决办法
1万
查看次数

标签 统计

css-transitions ×1

css3 ×1

safari ×1