CSS3转换(供应商前缀)立即崩溃

Question

下面是我正在做的项目(除了更改名称外，代码完全复制)。

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

div #logo的样式如下：

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

这会导致Safari 6.0.5在OSX10.8.5上立即崩溃。如果我删除这些转换，它就不会崩溃。

我怎样才能解决这个问题？

Answer 1

Safari有时在all-property转换中遇到一些困难。

试试这个：

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

编辑:在玩了更多的之后，实际上是-webkit-transition: all和-webkit-calc()的结合导致了问题。这是Safari中的一个bug，为了克服它，您可能需要使用javascript来计算最高边距，而不是CSS。

希望这能有所帮助！