स्थिति बदलने पर फ़ायरफ़ॉक्स में सीएसएस संक्रमण काम नहीं करता है

Question

मुझे परेशान करने वाली बग मिली है। मैं बच्चे तत्वों के सीएसएस गुणों को एनिमेट करने का प्रयास करता हूं, जब एक ही समय में माता-पिता की स्थिति बदल रही है (उदाहरण में यह निश्चित से पूर्ण तक है)। यह वेबकिट ब्राउज़र में बिना किसी समस्या के काम करता है, लेकिन फ़ायरफ़ॉक्स में (v। 17.0.1) कोई एनिमेटेड संक्रमण नहीं है।

jsFiddle उदाहरण: http://jsfiddle.net/chodorowicz/bc2YC/5/

वहाँ यह एफएफ में काम करने के लिए किसी भी समाधान है?

संपादित यह फ़ायरफ़ॉक्स 34 में https://bugzilla.mozilla.org/show_bug.cgi?id=625289

सीएसएस

#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

ऐसा लगता है कि तुम एक अच्छे बग पाया है निश्चित होती है। हालांकि यह मेरा पसंदीदा फिक्स नहीं है, यह नौकरी करता है। क्लिक पर ऐसा करने के लिए अपना बटन 2 बदलें।

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

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

यह फ़ायरफ़ॉक्स के लिए प्रकट होता है toggleClass() दोनों वर्गों के लिए तुरंत आग, संक्रमण प्रभाव के साथ कुछ मुद्दों के कारण। टाइमआउट डालने से jQuery को इसके लिए आवश्यक समय को संसाधित करने के लिए पर्याप्त समय मिलता है, ताकि क्रोम में समान संक्रमण किए जा सकें। मैंने टाइमआउट को 50ms तक रखा है, ऐसा लगता है कि यह jQuery को संसाधित करने के लिए पर्याप्त समय देता है इसे करने की जरूरत है। कभी-कभी मैंने देखा, उससे कम होने पर, यह असफल हो जाता है और जो आप वर्तमान में अनुभव कर रहे हैं वह कर सकते हैं।