वेबकिट टेक्स्ट एलियासिंग CSS3 एनिमेशन के दौरान अजीब हो जाता है

Question

यह एक मजेदार है। और मुझे यकीन है कि यह वेबकिट से संबंधित है क्योंकि यह केवल क्रोम संस्करण 20.0.1132.57 और सफारी 5.1.7 में एक मुद्दा प्रतीत होता है। मैंने इस मुद्दे को समझाने के लिए एक छोटा वीडियो अपलोड किया है क्योंकि पाठ के माध्यम से व्याख्या करना लगभग असंभव होगा।

वीडियो: http://youtu.be/0XttO-Diz2g

लघु संस्करण: CSS3 के एनिमेशन के दौरान, पाठ एक तैनात तत्व के अंदर है कि (निरपेक्ष या सापेक्ष) ने अपने एंटीलायज़िंग़ बदलने के लिए लगता है। एनिमेशन चल रहा है, जबकि यह बोल्ड हो जाता है।

नोट: यह स्केल किए गए तत्वों को एक एनीमेशन डालने वाली धुंधली तत्वों के समान नहीं है। (this issue)

कोई विचार, कामकाज आदि?

Answer 1

अद्यतन: नीचे मेरा पुराना उत्तर काम करता है लेकिन इस मुद्दे को हल करने के लिए केवल एक हैकी तरीका है। इसके बजाए, अन्य तत्वों को प्रभावित करने के कारण के लिए इसे पढ़ें: http://jsbin.com/efirip/5/quiet। संक्षेप में: एक एनिमेटेड तत्व को अपने स्वयं के स्टैकिंग संदर्भ में z-index देकर रखा जाना चाहिए।

पुराना उत्तर:

यह वेबकिट से संबंधित है। ईमानदारी से मुझे यकीन नहीं है कि यह क्यों करता है और मुझे लगता है कि यह भी एक बग है। आप पृष्ठ पर किसी भी तत्व को किसी भी 3 डी संबंधित CSS3 घोषणा को जोड़कर इसे रोक सकते हैं। उदाहरण:

body { 
    -webkit-transform: translateZ(0); 
} 

या:

body { 
    -webkit-backface-visibility: hidden; 
} 

इन घोषणाओं की उपस्थिति एनिमेशन शामिल हैं जो समस्या आपके कहे गए रोकता के लिए हार्डवेयर त्वरण का उपयोग करने के वेबकिट कारण बनता है।