CSS3 Transition(Vendor Prefixes)立即崩溃Safari

这是我正在处理的项目(代码被复制除了名称改变等)

https://c9.io/schwigri/strange-crash/workspace/index.html

div #logo的风格如下:

#logo {
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}

这会导致OS X 10.8.5上的Safari 6.0.5立即崩溃.
如果我删除这些转换它不会崩溃.

我该如何解决这个问题?

解决方法

Safari有时会遇到所有属性转换的麻烦.

试试这个:

#logo {
    -webkit-transition: color .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}

编辑:再次使用它之后,它实际上是你使用-webkit-transition:all和-webkit-calc()导致问题的组合.这是Safari中的一个错误,为了克服它,您可能需要使用javascript来计算您的上边距而不是CSS.

希望这可以帮助!

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效