Unidades en Transición “0s” en Firefox

¿Por qué la siguiente transición no funciona en Firefox sin las unidades? Una vez que agregue las unidades, funciona. Parece que los otros navegadores principales son indiferentes a las unidades.

Hasta donde yo sé, este es el único ejemplo de un tiempo de transición de ‘0’, sin unidades, que no funciona en Firefox.

Puedes verlo funcionando, y con las unidades, aquí en JSFiddle .

Y aquí está el mismo código exacto sin las unidades, y roto, en JSFiddle .

Como puede ver, Firefox es el único navegador que parece romperse. Además, aquí está el código:

HTML:

 

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

Me disculpo por la gran cantidad de ‘estilo’ que es independiente del problema en cuestión. Pero puede haber un acoplamiento entre el estilo que estoy usando y la transición fallida, por lo que estoy incluyendo el código completo. También es un menú mucho más lindo con el estilo 🙂

Si bien los valores y unidades de CSS no dicen explícitamente que no se permiten cero tiempos sin unidades, sí indica que se permiten ceros sin unidades para longitudes y angularjs. Creo que esto implica que los ceros sin unidades no están permitidos para ninguna otra dimensión o cantidad, porque los ceros sin unidades nunca se abordan en ningún otro lugar en la especificación. Por lo tanto, no se permite tener un cero sin unidades para una propiedad de tiempo. 1

Entonces, si se especifica un cero sin una unidad para una propiedad de tiempo, la statement no es válida y debe ignorarse por completo, que es lo que Firefox está haciendo. En este caso, Firefox está siguiendo el estándar correctamente, mientras que todos los demás navegadores tienen errores.


1 Parece que CSS originalmente tenía la intención de permitir valores de tiempo cero sin unidades, junto con varias otras unidades diferentes, en hojas de estilo aural . Esto puede explicar por qué los otros navegadores eligen permitir cero unidades sin unidades. Sin embargo, dado que las hojas de estilo son ahora obsoletas, esa sección ya no es normativa y, como tal, las reglas ya no se aplican. Para agregar a la ironía, ninguno de los principales navegadores ha implementado hojas de estilo aural de todos modos (bueno, además de Opera quizás …).