css transitions not working in safari

Question

If you look at my page http://debourg-dev.ch/crea/ you will see the transition effects on my links don't work in safari (tested on latest version on mac). My code is the following:

a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

What is the problem?

Solution

It seems Safari has a bug and chokes on transition: all; (or just transition: Xs; because 'all' is the default property). It even crashes some versions of desktop and iOS Safari.

SOLUTION: Change it to transition: color 0.5s ease-in-out; (Or, of course any other property, just make sure it's not 'all'.)

It could also be a problem specifically with the transition being applied globally to anchor tags - read more here

More about Safari crashing

And here

Comments

[user1280853]

Already tried clearing the cache and reseting safari, still not working. I'm also running OSX 10.9.1 and Safari Version 7.0.1 (9537.73.11)

[Bashu Naimi-Roy]

This was helpful, thank you. I'll also note that this isn't consistent across style properties- I encountered a bug in MacOS Safari 13.1 where if transition:all is applied, Safari will not rerender certain properties like outline if they are the only property whose value is being changed. But adding other properties like font-size would trigger a repaint, with all transitions would be rendered, including the previously ignored outline.

[rickvian]

Suprisingly instead of using transition: translateY(0) 1s; using your format fixed my Safari buggy animation problem