Przejście CSS nie działa w przeglądarce Firefox po zmianie pozycji

Question

Znalazłem denerwujący błąd. Próbuję animować właściwości CSS elementów potomnych, gdy jednocześnie zmienia się pozycja obiektu nadrzędnego (w przykładzie jest to od stałego do absolutnego). Działa to bez problemu w przeglądarkach Webkit, ale w Firefoksie (wer. 17.0.1) nie ma animowanego przejścia.

jsFiddle przykład: http://jsfiddle.net/chodorowicz/bc2YC/5/

Czy istnieje rozwiązanie, aby pracować w FF?

EDIT Jest ustalona w Firefoksie 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

Wydaje znalezieniu dobrego błąd. Chociaż nie jest to moja ulubiona poprawka, wykonuje to zadanie. Zmień przycisk 2, aby to zrobić po kliknięciu.

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

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

Pojawia się dla firefox, toggleClass() odpala natychmiast dla obu klas, powodując pewne problemy z efektami przejścia. Ustawienie limitu czasu daje jQuery wystarczającą ilość czasu na przetworzenie tego, czego potrzebuje, w celu wykonania przejść podobnych do tych w Chrome itp. Ustawiłem limit czasu na 50 ms, wydaje się, że daje to wystarczająco dużo czasu, aby jQuery mógł przetworzyć to, co jest potrzebne. to musi zrobić. Idąc niżej niż to, co czasami widziałem, zawodzi i wykonuje to, czego obecnie doświadczasz.