5

Why doesn't the following transition work in Firefox without the units? Once you add the units, it works. It seems that the other major browsers are indifferent to the units.

As far as I know, this is the only example of a transition time of '0', without units, not working in Firefox.

You can see it working, and with the units, here at JSFiddle.

And here is the same exact code without the units, and broken, on JSFiddle.

As you can see, Firefox is the only browser that seems to break. Also, here's the code:

HTML:

<nav>
  <ul id="nav">
    <li>
      <a href="#" id="nav1">Home</a>
    </li>
    <li>
      <a href="pasta.html" id="nav2">Charters</a>
      <ul>
        <li><a href="#">New Groups</a></li>
        <li><a href="#">Current Groups</a></li>
      </ul>
      </li>
    <li>
      <a href="same.php" id="nav3">Funding</a>
      <ul>
        <li><a href="#">Funding Guide</a></li>
        <li><a href="#">Get Funding</a></li>
        <li><a href="#">Treasurers</a></li>
        <li><a href="#">Calendar</a></li>
      </ul>
    </li>
    <li>
      <a href="#" id="nav4">Accounts</a>
    </li>
    <li>
      <a href="magis2.swf" id="nav5">Services</a>
      <ul>
        <li><a href="#">Shuttle Service</a></li>
        <li><a href="#">Van Reservations</a></li>
        <li><a href="#">Rattech</a></li>
        <li><a href="#">Sound System</a></li>
      </ul>
    </li>
  </ul>
</nav>​

CSS:

/****************************
Functionality
*****************************/

/* Menu header */
#nav > li {
  float: left;
  margin: 0 19px;
  padding: 0 1px 19px 0;
  position: relative;
}
/* Dropdown elements */
#nav > li:hover ul {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0, 0;
  /*Remove the units here and in the next selector to break it*/
  -moz-transition-delay: 0s, 0s;
  -o-transition-delay: 0, 0;
  transition-delay: 0, 0;
}
#nav ul {
  visibility: hidden;
  z-index: 1000;
  width: 140px;
  padding: 8px 0;
  position: absolute;
  top: 35px;
  left: -35px;
  opacity: 0;
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 2px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
  -webkit-transition-property: opacity, visibility;
  -moz-transition-property: opacity, visibility;
  -o-transition-property: opacity, visibility;
  transition-property: opacity, visibility;

  -webkit-transition-duration: .2s, 0;
  /*Remove the units here and below to break it*/
  -moz-transition-duration: .2s, 0s;
  -o-transition-duration: .2s, 0;
  transition-duration: .2s, 0;

  -webkit-transition-delay: 0, .2s;
  /*Remove the units here and below to break it*/
  -moz-transition-delay: 0s, .2s;
  -o-transition-delay: 0, .2s;
  transition-delay: 0, .2s;
}

/*********
Style (this should be irrelevant)
*********/

a {
  color: #000;
  display: block;
  font-size: 13px;
  text-decoration: none;
  font-family: 'Georgia', serif;
}
#nav ul a {
  font-size: 12px;
  padding: 10px 18px;
}
#nav ul li:hover {
  background: #e9e9e9;
}
nav {
  width: 470px;
  height: 45px;
  margin-top: 40px;
  margin-left: 10px;
}

​ I apologize for the heavy amount of 'styling' that is independent of the issue at hand. But there may be coupling between the styling I'm using and the failed transition, so I'm including the code in full. It's also a much prettier menu with the styling :)

jamesplease
  • 12,547
  • 6
  • 47
  • 73

1 Answers1

20

While CSS Values and Units does not explicitly say that unitless zero times are not allowed, it does say that unitless zeroes are allowed for lengths and angles. I believe this implies unitless zeroes are not allowed for any other dimension or quantity, because unitless zeroes are never addressed anywhere else in the spec. Therefore, having a unitless zero for a time property is not allowed.1

So, if a zero without a unit is specified for a time property, the declaration is invalid and should be completely ignored, which is what Firefox is doing. In this case, Firefox is following the standard correctly, while all other browsers are buggy.


1 It seems that CSS had originally intended to allow unitless zero time values - along with several other different units - in aural style sheets. This may explain why the other browsers choose to allow unitless zero times. However, since aural style sheets are now obsolete, that section is no longer normative and as such, the rules there no longer apply. To add to the irony, none of the major browsers ever implemented aural style sheets anyway (well, besides Opera maybe...).

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    Ah, okay! That makes sense. The docs [over on Mozilla](https://developer.mozilla.org/en-US/docs/CSS/time) go further than implying it by explicitly stating it. I'll accept the answer once the wait time is over. Thanks. – jamesplease Oct 30 '12 at 18:29
  • @jmeas: Thanks for the link - I just updated my answer with a little more background info that *might* explain why the other browsers allow unitless zero times... – BoltClock Oct 30 '12 at 18:36
  • 1
    This is a very informative answer, @BoltClock! I really appreciate the thoroughness of it. – jamesplease Oct 30 '12 at 18:38
  • I really wish the spec allowed for unitless 0 times. – Nathan Arthur Feb 23 '17 at 17:16
  • 1
    @Nathan Arthur: IIRC the reason they ended up not allowing unitless 0 for anything else was to avoid ambiguity. There are no known shorthand properties that take both a and a – BoltClock Feb 23 '17 at 17:22