multiple css3 transitions conflict

Problem

I have a main nav that is a CSS3 only drop down menu with and nice animation as the subnav appears.

I also have on the same page a slider (flexslider) which is also a CSS3 only item.

My problem is that that animations are interfering with each other. Once I hover over a navigation item, the subnav menu for that item only shows up once the slider is set to slide to the next image, so both animations happen at the same time instead of independent of each other.

Here's a link to the page I'm talking about: http://supermarchepa.com/v3/eng/index.html

Cheers.

Problem courtesy of: user127181

Solution

It seems Safari doesn't like animating visibility, try animating only the properties you need.

nav ul#nav ul {
 -webkit-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out;
 -moz-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out;
 -ms-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out;
 -o-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out;
 transition: opacity .2s ease-in-out, margin-top .2s ease-in-out;
}

This will fix your problem. Though it is a very weird bug indeed.

Solution courtesy of: Duopixel

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.