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?

Try this all 0.5s ease-in-out 0s. Adding that 0s on the end was needed for ios6 ipad — 2ne, Feb 14 '14 at 01:10

score 9 · Answer 1 · edited May 31 '19 at 15:09

9

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

edited May 31 '19 at 15:09

Nathan Arthur

8,287
7
55
80

answered Oct 14 '14 at 11:55

63N

123
2
9

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`. – Bashu Naimi-Roy May 05 '20 at 17:08

score 0 · Answer 2 · answered Feb 13 '14 at 22:44

0

The transition appears to be working for me when running OSX 10.9.1 and Safari 7.0.1. If I had to guess, the issue is likely due to cacheing. Try clearing your cache and see if the problem persists.

answered Feb 13 '14 at 22:44

Hughes

985
2
9
29

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) – user1280853 Feb 13 '14 at 22:50

score 0 · Answer 3 · edited May 31 '19 at 15:09

0

For Safari try the following:

-webkit-transition: 190ms width linear;

where width represents the property being changed, prevent use of all as different browsers interpret this differently and can cause issues especially in Safari browser.

edited May 31 '19 at 15:09

Nathan Arthur

8,287
7
55
80

answered Sep 25 '15 at 10:58

Aastha Awasthi

1

Suprisingly instead of using transition: translateY(0) 1s; using your format fixed my Safari buggy animation problem – rickvian Nov 02 '20 at 07:39

css transitions not working in safari

3 Answers3

Linked