फ़ायरफ़ॉक्स में jQuery और सीएसएस एनिमेशन चॉपी

Question

मैं minisite पर काम कर रहा हूं जिसमें बहुत सारी jQuery एनीमेशन है। यह सफारी में ठीक काम करता है, क्रोम & आईई 9, लेकिन एनीमेशन वास्तव में फ़ायरफ़ॉक्स में फ़ायरफ़ॉक्स (7, 8 & 9) ओएसएक्स पर है। मैंने सोचा कि सीएसएस एनीमेशन आसान होगा, इसलिए मैं साइट के आईपैड संस्करण adapted और फ़ायरफ़ॉक्स में कोशिश की। यह उतना ही बुरा लगता है।

मैंने फ़ायरफ़ॉक्स के साथ बहुत समय नहीं बिताया है, इसलिए मुझे यकीन नहीं है कि मैं यहां क्या कर रहा हूं। क्या मुझे GPU त्वरण को ट्रिगर करने की आवश्यकता है (जैसे वेबकिट में translateZ (0) का उपयोग करना, या क्या यह सब कुछ सब कुछ के लिए हर समय इस्तेमाल किया जाता है (जैसे IE9?) क्या फ़ायरफ़ॉक्स सिर्फ GPU के साथ पर्याप्त शक्तिशाली नहीं है?

मैं वास्तव में किसी भी मदद की सराहना करता हूं। मैं इस पर अपनी रस्सी के अंत में तरह का हूँ।

Answer 1

आसपास देखने और प्रश्न पूछने की उचित मात्रा के बाद, ऐसा लगता है कि फ़ायरफ़ॉक्स सिर्फ डोम एनीमेशन के साथ-साथ अन्य ब्राउज़रों को भी संभाल नहीं करता है। तो ऐसा लगता है कि मुझे सिर्फ चॉकलेट फ़ायरफ़ॉक्स एनीमेशन के साथ रहना होगा।

Answer 2

मैंने देखा कि फ़ायरफ़ॉक्स विंडो होने पर एनीमेशन स्टटर नहीं होता है, मैं विन 7 x32 पर हूं। वे असली चिकनी काम करते हैं।

एनिमेशन केवल थोड़ी-थोड़ी चंचल हैं जबकि ट्रांज़िशन केवल। बाकी अच्छा & है कि वेबसाइट एक आश्चर्यजनक & अद्भुत काम है जो आपने अभी तक किया है!

Answer 3

मुझे पता है कि इस सवाल को कई साल पहले पूछा गया था, लेकिन मैं बस उस पर ठोकर खाई और 'फ़ायरफ़ॉक्स बेकार' से कोई वास्तविक जवाब नहीं है। फ़ायरफ़ॉक्स में डोम तत्वों को एनिमेट करने के लिए हार्डवेयर त्वरण को सक्षम करने की चाल आपके अनुवाद के साथ एक छोटा घूर्णन जोड़ना है। उदाहरण के लिए:

@keyframes square-animation { 
    0%, 100% { 
     transform: translate(600px, 160px) rotate(0.01deg); 
    } 
    50% { 
     transform: translate(355px, 160px) rotate(0.01deg); 
    } 
} 

कारण यह अस्थिर होती है div के भीतर कुछ भी धुंधला एनिमेटेड किया जा रहा (विशेष रूप से पाठ) से बचना है। जबकि मैं व्यक्तिगत रूप से नहीं सोचता कि यह डिफ़ॉल्ट व्यवहार के लिए सही विकल्प है, तो आप तर्क here देख सकते हैं।