css видимость перехода не работает в сафари

Question

У меня есть очень простая панель навигации - горизонтальная, с одним уровнем вертикальных выпадающих списков, которые я реализовал с помощью CSS. Я хотел бы добавить небольшую задержку, когда мышь выйдет из выпадающих меню. Оглядевшись, оказалось, что переход CSS свойства видимости может приблизить меня. Здесь уместна CSS:

.navigation ul ul 
{ 
    display: block; 
    visibility: hidden; 
    -webkit-transition: visibility .75s, linear; 
    -moz-transition: visibility .75s, linear; 
    /* etc... */ 
    transition: visibility .75s, linear; 
} 

.navigation ul li:hover > ul 
{ 
    visibility: visible; 
} 

Это было именно то, что мне нужно на OS X в Firefox (44.0.2), Chrome (48.0.2564.116), и даже опера (35.0.2066.68). Фактически, я был удивлен, что не было задержки для мыши, но задержка была применена для мыши. Только то, что я хотел.

В Safari (9.0.3) он действует так, как будто свойство перехода отсутствует - выпадающее меню сразу же исчезает при нажатии мыши. Глядя на «Inspect Element», я вижу, что браузер подобрал свойство перехода (правильно) для рассматриваемого тега ul.

Я что-то упускаю и другие браузеры просто разрешительны? Не работает Safari? Это не большая проблема, но я бы хотел, чтобы она работала повсюду, если это было возможно. Благодаря!

ПРИМЕЧАНИЕ/EDIT о возможности дублирования вопроса (CSS transition with visibility not working): В моем случае эффект бинарной видимости работает по желанию во всех случаях, которые я пробовал, кроме Safari. Кроме того, я понял это, что я выложу ниже ...

Answer 1

Попробуйте это:

transition: visibility 0 linear .75s; 

Answer 2

Это тот случай, Firefox и Chrome интерпретации продолжительность перехода как задержка для видимости где Safari этого не делает.

Так что исправление сделать это правильно и установить задержку, а не продолжительность перехода:

transition: visibility 0 linear .75s; 

Это работает для всех, что я пробовал. По-прежнему существует различие в работе, которое я вижу с Safari, поскольку он задерживается как при наведении на мышь, так и в мыши, а другие - только для мыши.

EDIT: Заявленный победу слишком рано и больше деталей ...

Firefox не нравится '0', без единицы, так изменить, что:

transition: visibility 0s linear .75s; 

С этим изменением, я см. единообразное поведение во всех браузерах, перечисленных выше, с эквивалентной задержкой на и mouseover и mouseoff.

Также обратите внимание, что в моем первоначальном коде выше часть проблемы заключалась в том, что в нее попала посторонняя запятая, изменяющая то, что было в CSS, от того, что я намеревался, создавая больше путаницы (можете ли вы сказать, что я новичок в этом CSS3 еще?).

Некоторые продолжение испытания также показали, что, если я указываю либо

transition: visibility .75s; 

или даже проще

transition: .75s; 

я получаю именно то, что я искал изначально, что 0 задержка при наведении курсора мыши и 3/4 сек. Зачем?(царапающая головка) Мне просто интересно, будет ли это поведение, которое изменится в будущих (или предыдущих) версиях браузеров. Я полагаю, что это часть диких, диких западных особенностей.