CSS3 एनीमेशन लागू करने पर क्रोम स्क्रीन फ्लैश (केवल पहली बार)

Question

संपादित करें: @Archer का उत्तर यह ठीक करने लगता है। (कृपया उसे वोट दें, क्योंकि मेरे पास ऐसा करने के लिए पर्याप्त अंक नहीं हैं)।
बग यहां क्लिक करें के बारे में अधिक जानने के लिए: http://www.viget.com/inspire/webkit-transform-kill-the-flash/

---

मेरे समस्या को समझाने के लिए आसान नहीं है। मैंने jsfiddle पर एक टेस्ट केस बनाया है। आप इस पाठ के निचले हिस्से में लिंक पा सकते हैं।

इससे पहले कि आप डेमो लिंक पर क्लिक करें निम्नलिखित के बारे में पता होना:

सुनिश्चित करें कि आप गूगल क्रोम का उपयोग कर रहे हो। (सीएसएस में -webkit उपसर्गों के कारण)।

पहली बार ध्यान दें जब आप नारंगी बटन पर क्लिक करते हैं। एनीमेशन शुरू होने से पहले आपको एक प्रकार का छोटा फ्लैश देखना चाहिए। जब आप दोबारा प्रयास करें (रीसेट बटन पर क्लिक करने के बाद) सब कुछ ठीक है, कोई चमकती स्क्रीन नहीं है। लेकिन यदि आप अपने ब्राउज़र कैश (CTRL-SHIFT-DEL) को साफ़ करते हैं, ब्राउज़र बंद करें, और पृष्ठ को फिर से लोड करें, तो हिचकी फिर से है।
मुझे उम्मीद है कि मैंने इसे स्पष्ट रूप से समझाया है।

डेमो: http://jsfiddle.net/NKQNX/14/

(मेरी वर्तनी के लिए खेद है, अंग्रेजी नहीं मेरी पहली भाषा है)

Answer 1

जाहिर है, यह वेबकिट एनिमेशन के साथ एक ज्ञात मुद्दा है। Googling के बारे में थोड़ी इस के साथ आया था ...

body { 
    -webkit-transform: translate3d(0, 0, 0); 
} 

मैं यह भी कहा कि अपने उदाहरण में सीएसएस करने के लिए और इसके बारे में 10 बार की कोशिश की और एक बार झिलमिलाहट नहीं मिला, जहां मैं लगातार इसे पाने के लिए कर रहा था पहले।

http://jsfiddle.net/NKQNX/16/

Answer 2

मैं में बड़े क्रोम बनाता है कई बार यह बहुत देखा है, लेकिन पिछले कुछ सप्ताहों के रूप में यह तय किया गया है। मैं क्रोम 1 9 चला रहा हूं, और इन चमकों को और नहीं देख रहा हूं।

मुझे लगता है कि यह तब होता है जब 3 डी ट्रांसफॉर्म एनिमेटेड होता है। 3 डी अनुवाद को मजबूर करकर आर्चर ने इंगित किया है कि इससे बचा जाता है, क्योंकि पृष्ठ पहले ही ग्राफिक्स कार्ड पर प्रस्तुत किया गया है।