La transizione CSS non funziona in Firefox quando la posizione è cambiata

Question

Ho trovato bug fastidioso. Cerco di animare le proprietà CSS degli elementi figlio quando allo stesso tempo cambia la posizione di genitore (nell'esempio è da fisso a assoluto). Funziona senza problemi nei browser Webkit, ma in Firefox (v. 17.0.1) non c'è transizione animata.

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

C'è qualche soluzione per farlo funzionare in FF?

EDIT E 'fissato 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%; 
} 

Answer 1

Sembra aver trovato un buon bug. Anche se questa non è la mia soluzione preferita, fa il lavoro. Cambia il tuo pulsante2 per farlo al clic.

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

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

Sembra per Firefox la toggleClass() spara immediatamente per entrambe le classi, causando alcuni problemi con gli effetti di transizione. Mettere il timeout dà a jQuery il tempo necessario per elaborare ciò di cui ha bisogno, per fare le transizioni simili a quelle in Chrome, ecc. Metto il timeout a 50ms, questo sembra dargli abbastanza tempo per jQuery per elaborare cosa deve fare. Andando più in basso di quello che ho visto a volte, fallisce e fa quello che stai attualmente vivendo.