Safari CSS Transitions peculiarity

[alexmccabe]

Soo this is weird. Basically everything works as it should in every browser, except for Windows Safari. I have CSS opacity/margin transitions on quite a few of elements on my website. Look great everywhere. Windows Safari not only doesn’t show the transitions, it stops the hover effects happening as well.

This is a huge issue as it stops the hover states from working on a navigation.

Now I built a stripped down test case of my navigation (using hardcode menu items instead of php generated ones) and the EXACT same CSS code. Works perfectly (can be viewed [here](http://codepen.io/alexmccabe/pen/iICyJ “”)).

Has anyone had issues like this before?

Works perfectly in the following browsers (latest versions of all)

+ Rockmelt OSX & windows
+ Chrome OSX & windows
+ Firefox OSX & windows
+ Safari OSX
+ Opera OSX & Windows

On some windows machines it will work, but very badly (the animations are jumpy).

[Paulie_D]

Related to this?

https://css-tricks.com/forums/discussion/26475/css3-transitions-only-works-on-the-first-element-in-safari#Item_1

Just seems that both involve transforms/transitions and Safari.

Otherwise….

[Paulie_D]

Any specific version of Safari in that Windows users don’t have access to safari 6…AFAIK?

[Paulie_D]

I’m not seeing any issues on W7 + Safari 5.1.7 although 0.2s is pretty quick.

[Paulie_D]

Hmm…barring anyone else testing on W7 & 5.1.7..it sounds like a local issue.

The only reason I mentioned 0.2s is it just felt fast. With easing there isn’t really any time to ‘experience’ an effect.

[Paulie_D]

Perhaps you could let us look at a live link?

[ppavell]

We had the same issue… Safari doesn’t proceed transition of visibility (transition: all in your case), so you have to specify the exact parameter, which should be animated. That should help.

[Author]

Posts