css3 transitions not firing first time in Firefox 4

Question

I am experimenting with some css3 transitions. I put together a quick slider test and it works well in the webkit family. In Firefox 4, the first time you click on the left link the slider is suppose to slide to the left, however, there is no css transition until the second time you click the link. I put the demo up on jsfiddle - http://jsfiddle.net/mrleroylee/ctY68/

Is this a result of something in my code or is this a bug?

Huston

Answer 1

Set left: 0 in your styles for ul; that got it working in the fiddle for me: http://jsfiddle.net/ctY68/4/

Looks like Gecko isn't considering your first style change a transition because there was no initial value set.

Pace

Glad to be of service. Seems pretty silly of Gecko to handle this situation that way. I see that Chrome does handle the first transition as it probably should... did you test in Opera and IE10? If all of them transition from an implied 0 instead of an explicit 0, you might consider filing a bug w/ Mozilla at bugzilla.mozilla.org, and you can submit your JSFiddle as the test case. – Pace

I haven't tested Opera or IE10 yet. Good idea though. – Huston