multiple css3 переходы конфликтуют

Question

У меня есть главный навигатор, который является только выпадающим меню CSS3 с приятной анимацией, когда появляется subnav.

У меня также есть на той же странице слайдер (flexslider), который также является элементом CSS3.

Моя проблема в том, что эти анимации мешают друг другу. Как только я навещу над элементом навигации, меню subnav для этого элемента появится только после того, как слайдер настроится на слайд на следующее изображение, поэтому обе анимации происходят одновременно, а не независимо друг от друга.

Вот ссылка на страницу я говорю: http://supermarchepa.com/v3/eng/index.html

Приветствия.

Answer 1

Кажется, Safari не нравится анимировать visibility, попробуйте оживить только те свойства, которые вам нужны.

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; 
} 

Это исправит вашу проблему. Хотя это очень странная ошибка.