0

I have a very simple navigation bar - horizontal, with one level of vertical dropdowns - that I've implemented using CSS. I wanted to add a short delay when the mouse comes off the dropdowns. Looking around, it appeared that a CSS transition of the visibility property might get me close. Here is the pertinent 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;
}

This did exactly what I needed on OS X in Firefox (44.0.2), Chrome (48.0.2564.116), and even Opera (35.0.2066.68). In fact, I was surprised that there was no delay for mouseover but the delay was applied on mouseoff. Just what I wanted.

In Safari (9.0.3), it acts as if the transition property is not there - the dropdown immediately disappears on mouseoff. Looking at "Inspect Element", I can see that the browser has picked up the transition property (properly) for the ul tag in question.

Am I missing something and are the other browsers just being permissive? Is Safari not acting correctly? This isn't a huge issue but I'd like to get it to work everywhere if possible. Thanks!

NOTE/EDIT on possibility of duplicate question (CSS transition with visibility not working): In my case, the binary visibility effect is working as desired in all cases I've tried except for Safari. Also, I've figured it out, which I'll post below...

Community
  • 1
  • 1
Jasiu
  • 21
  • 5
  • Possible duplicate of [CSS transition with visibility not working](http://stackoverflow.com/questions/27900053/css-transition-with-visibility-not-working) – Asons Feb 21 '16 at 15:18

2 Answers2

0

Try this:

transition: visibility 0 linear .75s;
Ch33ky
  • 31
  • 7
  • opacity doesn't work in my case for two reasons: 1) The entire ul is still "there", so that if I hover closely *below* the navigation bar, the dropdown pops up. I don't want that. 2) I'm not looking for any sort of fade - I actually want the binary nature of the visibility property. – Jasiu Feb 21 '16 at 16:38
0

This is a case of Firefox and Chrome interpreting the transition duration as a delay for visibility where Safari does not.

So the fix is to do it right and set the delay, not the transition duration:

transition: visibility 0 linear .75s;

That works for all that I've tried. There is still an operational difference I see with Safari as it delays on both mouseover and mouseoff, while the others are only affected for mouseoff.

EDIT: Declared victory too early and more details...

Firefox doesn't like the '0' with no unit, so amend that to:

transition: visibility 0s linear .75s;

With that change, I see uniform behavior in all of the browsers I listed above, with an equivalent delay on both mouseover and mouseoff.

Also note that in my initial code above, part of the problem was that an extraneous comma got in there, altering what was in the CSS from what I intended, creating more confusion (can you tell I'm new at this CSS3 stuff yet?).

Some continued testing also revealed that if I specify either

transition: visibility .75s;

or even the simpler

transition: .75s;

I get exactly what I was looking for initially, which is 0 delay on mouseover and the 3/4 sec delay on mouseoff. Why? (scratching head) I'm just wondering if this is a behavior that will change in future (or previous) versions of the browsers. Part of dealing in the wild, wild west of features, I guess.

Jasiu
  • 21
  • 5