конфликт множественных переходов css3

Question

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

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

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

Вот ссылка на страницу, о которой я говорю: 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;
}

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