CODEWITHSUNDEEP
animationcssconflict
user127181
user127181

Reputation: 743

multiple css3 transitions conflict

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.

Upvotes: 0

Views: 2222

Answers (1)

methodofaction
methodofaction

Reputation: 72405

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.

Upvotes: 4

Related Questions