CSS3 ओएसएक्स पर सफारी 6 में फ्लिकरिंग (लेकिन यह झटके से सफेद समस्या नहीं है!)

Question

यह समस्या आईओएस या क्रोम पर मौजूद नहीं है, इसलिए यह वेबकिट से संबंधित समस्या नहीं है। यह ओएस एक्स 10.8.2 पर नवीनतम सफारी 6.0.2 के लिए विशिष्ट प्रतीत होता है (और 10.8.3 पूर्वावलोकन 121265 द्वारा तय नहीं किया गया है जो सफारी 6.0.3 के साथ आता है)। मैं जल्द ही सफारी 6.0.2 के साथ शेर 10.7.5 पर परीक्षण करूंगा, और पूर्वावलोकन 121268 के पूर्वावलोकन पर भी परीक्षण करूँगा।

http://jsfiddle.net/zrr2b/

यहाँ एक बेला है कि समस्या काफी स्पष्ट करता है। यदि आपके पास मैक चल रहा मैक है, तो आपको क्रोम और सफारी के बीच एक महत्वपूर्ण अंतर देखना चाहिए, जहां सफारी लॉट फ्लिकर करता है जैसे आप माउस को चारों ओर ले जाते हैं।

असल में समस्या यह है कि सफारी एक ही फ्रेम के लिए जेएस से निर्धारित लक्ष्य परिवर्तन को अंतःस्थापित करेगा, फिर संक्रमण एनीमेशन जारी रखें। यह एक झिलमिलाहट का कारण बनता है, लेकिन केवल तभी संक्रमण शुरू होने के बीच कहीं भी चल रहा था। तो बग CSS3 संक्रमण के अधिकांश (गैर गहन उपयोग) के लिए अपने बदसूरत सिर को पीछे नहीं रखेगा, लेकिन यदि कार्यक्षमता या दृश्य प्रभाव उस पर निर्भर करता है कि लक्ष्य को आसानी से इंटरपोलेट करने के लिए (मेरी वर्तमान प्रोजेक्ट करता है) यह झिलमिलाहट सुखद नहीं है।

मैं अस्थिर से संबंधित समान विषयों को देखा और काफी शैलियों के सभी संयोजनों ऐसे -webkit-backface-visibility: hidden के रूप में अस्थिर प्रतिक्रिया करने के लिए,, हार्डवेयर त्वरण, -webkit-transform-style: preserve-3d, -webkit-perspective: 1000 हासिल करने के लिए विभिन्न माता पिता तत्वों के लिए मजबूर है, और उनमें से कोई भी दुर्भाग्य से कुछ भी करने के लिए आवेदन किया है फ्लिकरिंग की इस सफारी-विशिष्ट समस्या को हल करने के लिए, यानी सफेद या खाली नहीं है, लेकिन एक फ्रेम के लिए लक्ष्य रूपांतरित करने के लिए झिलमिलाहट करना।

यहां इस शाखा में आप मुझे शैलियों का एक गुच्छा सेट कर सकते हैं जो "नियमित झिलमिलाहट" में मदद करते हैं लेकिन मेरे लिए कोई प्रभाव नहीं पड़ता है। http://jsfiddle.net/zrr2b/1/

चूंकि यह एक वेबकिट विशिष्ट मुद्दा नहीं है, मुझे यकीन है कि बग रिपोर्ट पोस्ट करने के बारे में कहां जाना है। 10.8.3 रिलीज से पहले इसे प्राप्त करना विशेष रूप से अच्छा होगा क्योंकि मैं इसे एक बड़ा मुद्दा मानता हूं। याद रखें, यह ऐसी चीज है जिसे हम वास्तव में फ्लैश को मारने के लिए एचटीएमएल 5 पर निर्भर करते हैं।

अपडेट: माउंटेन शेर पर

• सफारी संस्करण 6.0.3 (8536.28.10) 10.8.3 12D68 (रेटिना मैकबुक प्रो 15.4 ") अभी भी इस समस्या से ग्रस्त है
• सफारी विंडोज पर (5.1.7) इस बग से ग्रस्त नहीं
• सफारी शेर 10.7.5 (मैकबुक एयर मिड 2011) पर संस्करण 6.0.2 (7536.26.17) इस बग से ग्रस्त नहीं

Answer 1

टी झिलमिलाहट को कम करने के साथ प्रयोग करने के कुछ अलग तरीके यहां दिए गए हैं। हालांकि बड़ी समस्या यह है कि वे "हिट और मिस" लगते हैं। इसलिए आपको कुछ देखने की कोशिश करनी है कि कौन सी समस्या को हल करने में मदद करता है।

लेकिन वे एक ही कुछ बातें चारों ओर केंद्र:

-webkit-transform: translateZ(0); /* triggers GPU, sometimes fixes the issue */ 
transform: translateZ(0); /* non-webkit specific */ 

यदि यह नहीं है काफी है चाल, कोशिश:

-webkit-backface-visibility: hidden; 
backface-visibility: hidden; 
-webkit-perspective: 1000; 
perspective: 1000; 

यदि यह भी विफल रहता है, इस प्रयास करें:

-webkit-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0); 

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

वे एनिमेटेड div में जायेंगे।