सफारी बदलते फ़ॉन्ट वजन जब असंबद्ध एनिमेशन चल रहे हैं

Question

मैं अपने पृष्ठ पर सीएसएस एनिमेशन का उपयोग कर रहा हूं और सफारी पृष्ठ पर कहीं और असंबद्ध फ़ॉन्ट वजन बदलता है जब एनिमेशन चल रहा है। कोई विचार क्यों ऐसा होता है? अन्य सभी ब्राउज़र ठीक काम करते हैं, क्रोम जैसे वेबकिट शामिल हैं।

मैं विस्तृत एक वीडियो यहाँ में बग है - http://www.screenr.com/gZN8

साइट भी यहाँ है - http://airport-r7.appspot.com/ लेकिन यह तेजी से बदल रहा करते रहेंगे।

मैं तीर आइकन पर कंपास (@ संक्रमण-संपत्ति, @ संक्रमण-अवधि) का उपयोग कर रहा हूं। फ्लैशिंग के शीर्षक पर कोई संक्रमण लागू नहीं होता है। मैक पर - तो यह हार्डवेयर त्वरण हो सकता है, लेकिन मैं अभी भी इसे समझने की कोशिश कर रहा हूं।

Answer 1

जब आप GPU कंपोजिटिंग (उदाहरण के लिए, सीएसएस एनीमेशन के माध्यम से) को ट्रिगर करते हैं, तो ब्राउज़र उस तत्व को GPU को भेजता है, लेकिन उस तत्व के शीर्ष पर दिखाई देने वाली कुछ भी चीज़ जो उसके शीर्ष/बाएं गुण परिवर्तित हो जाती हैं। इसमें कोई भी स्थिति शामिल है: सापेक्ष तत्व जो एनिमेटिंग के बाद दिखाई देते हैं।

समाधान एनिमेटिंग तत्व स्थिति देना है: सापेक्ष और एक जेड-इंडेक्स जो इसे अन्य सभी चीज़ों से ऊपर रखता है। इस तरह आप अपनी एनीमेशन प्राप्त करते हैं लेकिन असंबद्ध तत्वों पर (बेहतर आईएमओ) उप-पिक्सेल फ़ॉन्ट प्रतिपादन रखते हैं।

यहाँ समस्या और समाधान का एक डेमो है http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1

अद्यतन: क्रोम के नए संस्करणों सब-पिक्सेल एंटीलायज़िंग़ GPU सम्मिश्रित तत्वों पर जब तक तत्व कोई पारदर्शिता नहीं है के रूप में, को बनाए रखने जैसे कोई पारदर्शी साथ एक पृष्ठभूमि है या अर्द्ध पारदर्शी पिक्सल। ध्यान दें कि सीमा-त्रिज्या जैसी चीजें सेमी-पारदर्शी पिक्सल पेश करती हैं।

Answer 2

स्पष्ट रूप से, यह वह कीमत है जो आप हार्डवेयर त्वरण के लिए भुगतान करते हैं: सभी पाठ क्षणिक रूप से छवियों में बदल जाते हैं, जिससे गुणवत्ता में रेंडर गुणवत्ता होती है।

हालांकि, उप-पिक्सेल एंटी-एलियासिंग को बंद करने के लिए html {-webkit-font-smoothing: antialiased} लागू करने से यह समस्या दूर हो जाती है। यही वह है जो मैं अभी कर रहा हूं।

अद्यतन: तब से, मुझे यह भी पता चला है कि यह तब होता है जब ब्राउज़र यह सुनिश्चित नहीं कर सकता कि एनिमेटेड अनुभाग टेक्स्ट को प्रभावित करेगा या नहीं। इसे आम तौर पर उपरोक्त पाठ (उच्च z-index) एनिमेटेड तत्वों के द्वारा संभाला जा सकता है, और/या यह सुनिश्चित कर सकता है कि टेक्स्ट में पूरी तरह से अपारदर्शी पृष्ठभूमि हो।

Answer 3

मैं इस मुद्दे को कई बार सामना करना पड़ा है और एनिमेटेड तत्व के लिए निम्न सीएसएस जोड़ने सफलता मिली है:

z-index: 60000; 
position: relative; 

यह यह दोनों z- सूचकांक और स्थिति की जरूरत प्रभावी हो रहा है। मेरे मामले में मैं फ़ॉन्ट विस्मयकारी एनिमेटेड स्पिनरों के साथ इसका उपयोग कर रहा था।