मँडरा कुछ फ़ॉन्ट रंग

Question

वज़न मेरी सीएसएस में मैं एक वर्ग के लिए एक संक्रमण को परिभाषित किया। किसी कारण के लिए, जब मैं संक्रमण के साथ वर्ग पर होवर करें, किसी कारण से transition-duration फ़ॉन्ट रंग कहीं और (प्रपत्र प्लेसहोल्डर और कुछ लिंक) बदल देता है। (यह केवल सफारी में जहाँ तक मैं बता सकता हूँ होता है।)

यहाँ एक jsFiddle कि पता चलता है कि मैं क्या बारे में बात कर रहा हूँ:

http://jsfiddle.net/EJUhd/

किसी को भी पता है कि ऐसा क्यों होता है और मैं कैसे रोका जा सकता है यह?

Answer 1

मैं एक ऐसी ही समस्या से संघर्ष कर रहा था। मेरे लिए, पूरे पृष्ठ में यादृच्छिक लिंक जाहिर तौर पर बोल्ड हो गए (स्पष्ट रूप से ओएसएक्स और सफारी में एंटी-एलाइजिंग के साथ कुछ करना, क्रोम (विंडोज़ 7 और ओएसएक्स में) के साथ-साथ विंडोज़ में सफारी के समान संस्करण ने ठीक काम किया।

समाधान स्पष्ट नहीं है, और आप क्या कर रहे हैं इष्टतम नहीं हो सकता है, लेकिन कोड की इस पंक्ति जोड़ने के आधार पर समस्या का समाधान हो:

-webkit-transform: translateZ(0); 

यह मूलतः GPU से चलाता है एनीमेशन करने के लिए, और पाठ नहीं अब मेरी साइट में कलाकृतियां थीं। ध्यान दें कि इसका उपयोग करने के लिए हमेशा उचित नहीं है, क्योंकि अधिक बैटरी जीवन का उपयोग कर सकते हैं और अधिक संसाधनों का उपयोग कर सकते हैं।कभी-कभी हालांकि, यह कम उपयोग करता है, इसलिए जब आप इसे जोड़ते हैं तो मूल रूप से प्रदर्शन की जांच करें।

आप इसे सामान्य स्थिति पर जोड़ें: होवर एनिमेटेड स्थिति।

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

के रूप में प्रदर्शित होने के बजाय:

img:hover { /* not here */ } 

अन्य बहुत ही सकारात्मक पक्ष प्रभाव है कि एनीमेशन आप कर रहे हैं पर निर्भर करता है, यह GPU के माध्यम से चिकनी हो सकता है। तो आपको अपने अनुवर्ती पोस्ट में उल्लिखित चंचल एनीमेशन नहीं मिलेगा। मेरे मामले में, एफ़नीफ़ी सफारी में अधिक सहज थी। मैं एक छवि के 120% पैमाने और 5 डिग्री रोटेशन कर रहा था जिसमें कुछ बॉक्स-छाया एक ही समय में दिखाई दे रही थीं। मेरी स्थिति में, यह दुर्भाग्य से CPU उपयोग को कम नहीं किया।

Answer 2

मैं आपको बताना चाहता कारण है कि यह इस कर रहा है शुरू नहीं कर सकते, लेकिन सफारी अपने पाठ रंग बदलने नहीं है, यह पाठ अलग ढंग से विरोधी aliasing जबकि संक्रमण गति में है है। पाठ किनारों को चिकना हो जाता है, और पाठ स्वयं पतला हो जाता है। यदि आप सुलभता उपकरण के साथ पहेली पर ज़ूम इन करते हैं तो यह अतिरिक्त स्पष्ट है। कुछ छोटे आकारों पर, फॉर्म टेक्स्ट के बगल में स्थित बटन के चारों ओर छायांकन भी बदल जाता है। (क्या यह संभव है कि सफारी कुछ चीजों को दोबारा हटा रहा है, या संक्रमण के दौरान उन्हें उप-पिक्सेल स्तर पर पुन: पेश कर रहा है? कोई इसे कृपया समझाता है, यह अब मुझे पागल कर रहा है!)

क्योंकि मुझे कोई वास्तविक विचार नहीं है कि यह क्यों कर रहा है या तो, ये सबसे अच्छे समाधान नहीं हो सकते हैं:

आप जो बदल रहे हैं उसके आधार पर, एक जावास्क्रिप्ट एनीमेशन के साथ सीएसएस ट्रांसफॉर्म को प्रतिस्थापित करने से शायद इसे ठीक कर दिया जाएगा।
अपने बेला में उदाहरण के लिए, समस्या भी पैमाने परिवर्तन के साथ हुई, लेकिन एक ऐसी ही jQuery चेतन समारोह के साथ नहीं।

कुछ रंगों और शैलियों में प्रतीत होता है जहां एंटी-एलियासिंग परिवर्तन कम स्पष्ट (कम से कम पहेली में) है, इसलिए आप प्लेसहोल्डर्स और अन्य प्रभावित टेक्स्ट को अलग-अलग स्टाइल करने का भी प्रयास कर सकते हैं।
(यह धागा, प्लेसहोल्डर स्टाइल के साथ मदद कर सकता है, अगर आपको लगता है कि मार्ग जाना: Change an HTML5 input's placeholder color with CSS) नीचे दिए गए लेख से

Answer 3

ऊपर विरोधी aliasing की पहचान के लिए धन्यवाद, साथ ही मदद, मैं अपने कोड को संशोधित translate3d(0,0,0) शामिल करने के लिए और समस्या गायब हो गया:

-webkit-transition-duration: .17s, .17s translate3d(0,0,0); 

संक्रमण के रूप में चिकनी के रूप में यह एक बार नहीं है, लेकिन है कि एक और सवाल के लिए एक विषय है।

Wonky text anti-aliasing when rotating with webkit-transform in Chrome

http://johanbrook.com/design/css/a-fix-for-antialiasing-issues-in-webkit-browsers/

http://www.webkit.org/blog/386/3d-transforms/

Answer 4

मुझे एक ही समस्या थी, जबकि एक संक्रमण कुछ पाठ एंटीअलाइज्ड बन गया। यह केवल एंकर पाठ में होता है जो जेड-इंडेक्स के साथ स्थित तत्व के अंदर और जेड-इंडेक्स के साथ सापेक्ष ई स्थित होता है। यदि मैं सभी स्थिति और अनुक्रमणिका को हटा देता हूं तो समस्या गायब हो जाती है।

Answer 5

कोई और अधिक प्रासंगिक विषय मैं एक समस्या मैं था के लिए मिल गया है नहीं है, लेकिन इस मुद्दे ऊपर उल्लेख से संबंधित है। तो, किसी के लिए सहायक हो सकता है।

दो शब्दों में: मैं कुछ कंटेनर (पॉपअप) है, कुछ तत्व के अंदर। उपस्थिति निम्न तरीके से जाती है: कंटेनर पृष्ठभूमि अस्पष्टता के माध्यम से अंधेरे तक फैल रही है और अंदर तत्व तत्व स्केलिंग (जैसे पीछे से हमारे करीब आना) है। सब कुछ हर जगह महान काम करता है लेकिन सफारी (मैक/विन/आईफोन) में नहीं। सफारी "शुरुआत में" मेरे कंटेनर को दिखाता है, लेकिन यह कुछ अजीब तरीके से चमकता है (छोटे छोटे फ्लैश प्रकट होता है)।

केवल जोड़ने -webkit-परिणत: translateZ (0); (कंटेनर के लिए !!!) मदद की।

.container { 
    -webkit-transform: translateZ(0); /* <-- this */ 
} 

.container section { 
    -webkit-transform: translateZ(0) scale(.92); /* <-- and I added translate here as well */ 
    -webkit-transition: -webkit-transform .4s, opacity .3s; 
    opacity:0; 
} 

.container.active section { 
    -webkit-transform:translateZ(0) scale(1); 
    -webkit-transition: -webkit-transform .3s, opacity .3s; 
    opacity:1; 
} 

---

लेकिन बदलाव की बात कर रहा है, वहाँ भी कोड की निम्न हिस्सा था:

.container { 
    ... 
    top:-5000px; 
    left:-5000px; 
    -webkit-transition: opacity .5s, top 0s .5s, left 0s 5s, width 0s 5s, height 0s 5s; 
} 
.container.active { 
    -webkit-transition: opacity .5s; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 

पर विचार, कि मैं दिखाने के लिए/चाहते केवल सीएसएस स्विचिंग का उपयोग पॉपअप को छिपाने (और भी इसे "डिस्प्ले: कोई नहीं" के बजाय इसे अच्छी तरह से गायब करने के लिए)।

तो, सफारी (स्पष्ट रूप से) दिखाई देने पर किसी भी तरह से "अस्पष्टता" के अलावा संक्रमण गुणों को विरासत में मिला था, भले ही मैंने उन्हें केवल -वेबिट-संक्रमण के साथ अधिभारित किया हो: अस्पष्टता .5s;

.container { 
    ... 
    -webkit-transition: opacity .5s, top 0s 0s, left 0s 0s, width 0s 0s, height 0s 0s; 
} 

Answer 6

transition और translate3d का उपयोग कर एक ऐसी ही समस्या है:

हां, तो निम्नलिखित जोड़ने समस्या हल हो। कभी-कभी :hover शैलियों वाले पृष्ठ पर कोई भी तत्व इसके होवर व्यवहार को दिखाता है। मुझे स्लाइडर का उपयोग करके यह समस्या है। -webkit-transform: translateZ(0); को :hover तत्व पर रखें और इसका व्यवहार सामान्य है।

Answer 7

रोटेशन() शायद यह ठीक है, लेकिन पैमाने() के लिए यह -webkit-transform: translateZ(0); सूत्र काम नहीं किया था के लिए

।

मैं प्रयोग किया है:

-webkit-font-smoothing: antialiased;