CSS3 Transition ( Vendor Prefixes) crashes Safari

Question

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?

Answer 1

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!