वेबकिट में फ़ॉन्ट संक्रमण गड़बड़ाना CSS3 संक्रमण?

Question

जब से मैंने एक सीएसएस संक्रमण जोड़ा (पहला वाला होवर पर था, दूसरा एनीमेशन था) ऐसा लगता है कि मेरे फ़ॉन्ट्स को गड़बड़ कर दिया गया है, वे 'अलग' दिखते हैं।

यह पूरी तरह से विचित्र है, मैंने घंटों की तलाश की है और इसमें कुछ भी नहीं मिला है, और न ही मैं यह समझ सकता हूं कि यह क्यों हो रहा है।

फ़ायरफ़ॉक्स में यह ठीक लगता है, लेकिन सफारी और क्रोम में समस्याएं हैं।

http://www.simplerweb.co.uk

नीचे बाईं ओर गियर एनीमेशन नीचे सब कुछ एक लाइटर फ़ॉन्ट वजन और नेविगेशन मेनू की तरह लग रहा है एक ही लग रहा है।

मैं इस पर पूरी तरह खो गया हूं।

एनीमेशन के लिए सीएसएस यहां है।

.gearone {height:100px; 
width:100px; 
top:-10px; 
left:-10px; 
position:absolute; 
background-position:center; 
background-repeat:no-repeat; 
background-image:url(../images/gearone.png); 
-webkit-animation-name:    backrotate; 
    -webkit-animation-duration:  13s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transition-timing-function:linear; 


-moz-animation-name: backrotate; 
    -moz-animation-duration: 13s; 
     -moz-animation-timing-function: linear; 
    -moz-animation-iteration-count: infinite; 
} 

.geartwo {height:100px; 
width:100px; 
position:absolute; 
background-position:center; 
background-repeat:no-repeat; 
background-image:url(../images/gearone.png); 
top:20px; 
left:10px; 

-webkit-animation-name:    rotate; 
    -webkit-animation-duration:   13s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transition-timing-function:linear; 


    -moz-animation-name: rotate; 
    -moz-animation-duration: 13s; 
     -moz-animation-timing-function:linear; 
    -moz-animation-iteration-count: infinite; 

} 


@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotate(0deg); 

    } 
    to { 
    -webkit-transform: rotate(360deg); 

    } 
} 

@-moz-keyframes rotate { 
from { 

    -moz-transform: rotate(0deg); 
    } 
    to { 

    -moz-transform: rotate(360deg); 
    } 
} 



@-webkit-keyframes backrotate { 
    0% { 

     -webkit-transform: rotate(360deg); 
    } 
    100% { 

     -webkit-transform: rotate(0deg); 
    } 
} 
@-moz-keyframes backrotate { 
    0% { 
     -moz-transform: rotate(360deg); 

    } 
    100% { 
     -moz-transform: rotate(0deg); 

    } 
} 

Answer 1

जो आप देख रहे हैं वह वेबकिट एंटी-एलियास है क्योंकि यह एक वेक्टर के विपरीत बनावट के रूप में इसका इलाज कर रहा है। परिवर्तनों का उपयोग न करने के अलावा, या अपने प्रकार के बजाय छवि प्रदान करने के लिए टेक्स्ट प्रतिस्थापन का उपयोग करने के अलावा आप ऐसा नहीं कर सकते हैं।

वेबकिट एलियासिंग के संबंध में few related threads है, लेकिन मेरे पास प्रकार को प्रकार के रूप में रखने के लिए व्यक्तिगत रूप से बहुत भाग्य नहीं है, और अभी भी रूपांतरणों का उपयोग कर रहा है।

Answer 2

मैं कारण क्यों यह हो रहा है की वास्तव में यकीन नहीं है, लेकिन जब आपके .geartwo तत्व (100px x 100px) अपने टेक्स्ट ओवरलैप, यह हल्का करने लगता है जैसे कि यह लग रहा है। जब यह बंद हो जाता है, तो यह सामान्य हो जाता है। मैं भी, यह केवल वेबकिट ब्राउज़र में ध्यान दें।

इसे ठीक करने के लिए, आप गियर width और 40px को height (कि छवि का आकार वैसे भी है - मैं की जरूरत नहीं दिख रहा है यह 100px x 100px होने के लिए) सेट कर सकते हैं फिर से स्थिति, और फिर इसे तदनुसार।

संपादित करें: मुझे यकीन नहीं है कि आपको मेरे प्रस्ताव के बाद ऐसा करने की ज़रूरत है, लेकिन मुझे थोड़ी सी खोज के बाद this related discussion मिला।

Answer 3

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

#footer { 
    bottom: 0; 
    left: 330px; 
    right: 100px; 
    height: 75px; 
    background-color: #231f20; 
    min-width: 540px; 
    min-height: 75px; 
    position: fixed; 
    z-index: 10; 
} 

पाद लेख के अंदर मैं

#cityNav > ul > li a { 
      font-size: 24px; 
      text-transform: uppercase; 
      position: relative; 
      z-index: 110; 
      line-height: 24px; 
      height: 24px; 
      display: block; 
     } 

है और यह मेरा संक्रमण

.circle { 
     position: absolute; 
     top: 0; 
     left: 0; 
     display: block; 
     background-color: #ff0000; 
     width: 20px; 
     height: 20px; 
     cursor: pointer; 
     text-indent: -999em; 
     -webkit-border-radius: 50%; 
     -moz-border-radius: 50%; 
     -o-border-radius: 50%; 
     border-radius: 50%; 
     -webkit-transition: all .2s ease-out; 
     -moz-transition: all .2s ease-out; 
     -o-transition: all .2s ease-out; 
     transition: all .2s ease-out; 
    } 
    .circle:hover { 
     -webkit-transform: scale(2); 
     -moz-transform: scale(2); 
     -o-transform: scale(2); 
     transform: scale(2); 
    } 

Answer 4

है मुझे लगता है कि मैं एक ऐसी ही मुद्दा था, और क्या मेरे लिए यह तय

जोड़ने था

-webkit-font-smoothing: antialiased; 

मेरे शरीर सीएसएस में। जब किसी भी प्रकार की एनीमेशन होती है, तो वेबकिट एनीमेशन के साथ मदद करने के लिए पाठ को एंटीअलियास करने की कोशिश करता है, इसलिए इसे शुरू करने के साथ इसे बदलने या अलग दिखने से रोकता है।

Answer 5

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

z-index: 60000; 
position: relative; 

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

Answer 6

ऊपर बताए अनुसार, -webkit-font-smoothing: antialiased; डेस्कटॉप सफारी पर काम करता है। लेकिन आईओएस पर, आपको इसे ठीक करने के लिए -webkit-backface-visibility: hidden; का उपयोग करने की आवश्यकता है।

Answer 7

मुझे ओएसएक्स के लिए क्रोम में यह समस्या थी। -webkit-backface-visibility: hidden; का उपयोग समस्या को हल किया।

Answer 8

iOS8 के लिए, एक ही रास्ता मैं परिवर्तन flickers को दूर करने में सफल हो गए मेरी स्टाइलशीट को

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

जोड़कर था।

Answer 9

तुम सब करने की ज़रूरत है किसी भी तत्व है कि आप पर झिलमिलाहट देख रहे हैं करने के लिए इस सीएसएस नियम जोड़ने है:

-webkit-transform-style: preserve-3d; 

और बस हो गया।

Answer 10

जबकि -webkit-backface-visibility: hidden; आंशिक समाधान है; यह वास्तव में आपके पाठ के प्रदर्शन को खंडित करता है, खासकर यदि आपके पास चिकनाई/एए सक्षम है। यह बग भी बुरा है, क्योंकि यह तब होता है जब आप ट्रांसफॉर्म संपत्ति का उपयोग कर रहे हों।

हर दूसरे महीने इस विषय पर लगभग 2 साल के दौरे के बाद, मुझे एक फिक्स मिला। आपको एनिमेटेड होने वाले सीएसएस तत्व में position:relative जोड़ने की आवश्यकता है। हालांकि, एक पकड़ है, आपको इसे मान देने की आवश्यकता है जो उस तत्व से अधिक है या उससे कम है जिसे आप पर विरूपण देखते हैं। यह 100% तय करता है।

चूंकि विषय में 'निश्चित' उत्तर नहीं है, इसलिए मुझे आशा है कि यह उत्तर किसी ऐसे नाव में मदद करेगा जो मैं वर्षों से था।