CSS transition doesn't work in Firefox when position is changed

Question

I've found annoying bug. I try to animate CSS properties of child elements when at the same time position of parent is changing (in the example it's from fixed to absolute). This works without problem in Webkit browsers, but in Firefox (v. 17.0.1) there's no animated transition.

jsFiddle example: http://jsfiddle.net/chodorowicz/bc2YC/5/

Is there any solution to make it work in FF?

EDIT It's fixed in Firefox 34 https://bugzilla.mozilla.org/show_bug.cgi?id=625289

CSS

#container {
    position:fixed; left:100px; top:100px;
}
#container.some_state_position {
    position:absolute;
}
.box {
    width:100px; height:100px;
    background:blue;
}

.some_state .box {
    background:red; width:50px; height:50px;
}

img, .box  {
    -webkit-transition:all 1.5s ease;
    -moz-transition:all 1.5s ease;
    -ms-transition:all 1.5s ease;
    transition:all 1.5s ease;
}
img {width:100%;}
.some_state .other_container img {
    width:50%;
}

Submitted bug report: bugzilla.mozilla.org/show_bug.cgi?id=821976 — chodorowicz

Sean Keating Sean Keating · Accepted Answer · 2012-12-14T18:29:05

It seems you have found a good bug. Although this isn't my favorite fix, it does the job. Change your button2 to do this on click.

$("#button2").on({
    click: function() {
        $("#container").toggleClass("some_state");

        setTimeout(function() {
            $("#container").toggleClass("some_state_position");
        }, 50);
    }
});

It appears for firefox the toggleClass() fires immediately for both classes, causing some issues with the transition effects. Putting the timeout gives jQuery the enough time for it to process what it needs to, in order to do the transitions similar to those in Chrome, etc. I put the timeout to 50ms, this appears to give it enough time for jQuery to process what it needs to do. Going lower than that I saw sometimes, it fail and do what you are currently experiencing.

CSS transition doesn't work in Firefox when position is changed

1 Answers