CSS3 过渡(供应商前缀)立即使 Safari 崩溃

问题描述

这是我正在进行的项目(代码完全复制，除了名称更改等)

Here is the project I'm working on (code copied exactly except for names changed, etc.)

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

div #logo 的样式如下:

The div #logo has the style:

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

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

This causes an immediate crash in Safari 6.0.5 on OS X 10.8.5. If I remove these transitions it doesn't crash.

我该如何解决这个问题?

How can I resolve this issue?

推荐答案

Safari 有时会在 all-属性转换方面遇到一些问题.

Safari has some trouble sometimes with all-property transitions.

试试这个:

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

玩了一会儿，其实是你使用 -webkit-transition: all 和 -webkit-calc() 导致问题.这是 Safari 中的一个错误，为了克服它，您可能需要使用 javascript 来计算您的上边距而不是 CSS.

After playing around with it some more, it's actually the combination of your usage of -webkit-transition: all and -webkit-calc() that's causing the problem. This is a bug in Safari, and in order to overcome it, you may need to use javascript to calculate your top margin instead of CSS.

希望这会有所帮助！

这篇关于CSS3 过渡(供应商前缀)立即使 Safari 崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！