CSS3 Transition（Vendor Prefixes）立即崩溃Safari [英] CSS3 Transition ( Vendor Prefixes) crashes Safari immediately

问题描述

这是我正在处理的项目（除了名称已更改等，代码已完全复制）

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

div #logo 的样式如下：

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

这会导致Safari X 10.8.5 。
如果我删除这些转换，它不会崩溃。

我如何解决这个问题？

解决方案

Safari有时会出现一些问题，所有 - 属性过渡。

尝试：

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

编辑 ，它实际上是你的使用 -webkit-transition：all 和 -webkit-calc（）的结合问题。这是Safari中的一个错误，为了克服它，你可能需要使用javascript来计算你的顶部边距而不是CSS。

希望这有助于！ p>

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

The div #logo has the style:

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

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 has some trouble sometimes with all-property transitions.

Try this:

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

Edit: 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.

Hope this helps!

这篇关于CSS3 Transition（Vendor Prefixes）立即崩溃Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！