What is wrong with transitions in Firefox 18

Question

I have this code

nav {
   background-color:#600;
   padding:3px 0;
}
#menu {
   list-style: none;
   position: relative;
   text-align: center;
   z-index: 50;
}
#menu li {
   position: relative;
   display: inline-block;
   height: 40px;
   width:100px;
   max-width: 100%;
}
#menu li a {
   color: #000;
   text-decoration: none;
   display: block;
   position: relative;
   height: 40px;
   padding: 10px 15px 0;
   font-family: Berlin Sans FB;
   -webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
}
#menu li span {
   width: 6px;
   z-index: -1;
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   -webkit-transition: all 0.4s ease-in;
   -moz-transition: all 0.4s ease-in;
   -o-transition: all 0.4s ease-in;
   -ms-transition: all 0.4s ease-in;
   transition: all 0.4s ease-in;
}
#menu li:nth-of-type(1) span {background: green;}
#menu li:nth-of-type(2) span {background: red;}
#menu li:nth-of-type(3) span {background: #ff8400;}
#menu li:nth-of-type(4) span {background: purple;}
#menu li:nth-of-type(5) span {background: #49a7f3;}
#menu li:nth-of-type(6) span {background: yellow;}
#menu li:hover > span {min-width: 100%;}
#menu li a:hover {color: #fff;}
#menu li:hover {box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,0.3);}

Fiddle

It has worked fine in Chrome, Safari, and Firefox<18. It doesn't work in Internet Explorer or Firefox 18. Is there something that was changed in this version of Firefox that has changed how transitions are working?

I looked at this question and the accepted answer, but it didn't make sense
Why is my CSS3 Transition not working in Firefox?

Can you explain what's wrong? Also, where is your HTML? – matthewpavkov Jan 17 '13 at 03:27 — matthewpavkov, Jan 17 '13 at 03:27

score 1 · Accepted Answer · answered Jan 17 '13 at 03:34

1

Seems changing the width to a value other than min-width causes it to work properly in Firefox 18/Mac....

 #menu li:hover > span {
  width: 100%;
 }

Fiddle update

As Ben pointed out in the question you linked to, FF seems to want declarative values.

answered Jan 17 '13 at 03:34

Scott

21,475
8
43
55

Interesting. Could you possibly explain why this is? – Cody Guldner Jan 17 '13 at 03:36
Edited answer.. and Ben answered it in your linked question. FF seems to need actual values to calculate. It can't calculate ambiguous numbers such as `min-width`. – Scott Jan 17 '13 at 03:38
Why not? If it worked in the previous versions why wouldn't it work now? – Cody Guldner Jan 17 '13 at 04:01
I'm not a FF developer.. it may be a bug. – Scott Jan 17 '13 at 04:07
What changed is that per spec the initial value of `min-width` used to be 0, but now it's `auto` (see https://bugzilla.mozilla.org/show_bug.cgi?id=763689 ). And also per spec you can't interpolate between `auto` and `100%`... This is arguably a spec bug, actually. In any case, you can set `min-width: 0` in your case that doesn't have a min-width to work around this for now. – Boris Zbarsky Jan 17 '13 at 21:40

score 0 · Answer 2 · edited Apr 26 '13 at 18:22

0

There isn't a version of Firefox 18 for me to test on right now, but after looking at your code, I believe that you are missing an unprefixed version of the transition property

Fiddle

transition:all 0.2s ease-in;

According to Can I Use?, Firefox has already supported the non-prefixed version.

edited Apr 26 '13 at 18:22

Cody Guldner

2,888
1
25
36

answered Jan 17 '13 at 03:27

Passerby

9,715
2
33
50

Even if this isn't what's wrong, he does need to add `transition` without a prefix somewhere. Nice catch. – matthewpavkov Jan 17 '13 at 03:28
but this has worked in all the previous versions, so why would i need to add that now? And the link still doesn't work. But nice looking – Cody Guldner Jan 17 '13 at 03:34
@CodyGuldner 1) According to _can i use_, prefixed version was never implemented in IE10 (so IE "obviously" doesn't work); 2) Since this is a W3C recommendation, all browsers will eventually support the non-prefixed one (so adding it will make your site work more consistently), and then very likely to drop prefix support in later version (this does has already happen on some properties, though I can not remember one right now). – Passerby Jan 17 '13 at 03:41

What is wrong with transitions in Firefox 18

2 Answers2