-webkit-transform सीएसएस गुण नली फ़ॉन्ट रेंडरिंग

Question

यह प्रश्न this one जैसा ही है, सिवाय इसके कि मैं इसे विशेष रूप से मैक पर सफारी में देख रहा हूं (केवल एकमात्र प्लेटफार्म जिसे मुझे परवाह करने की आवश्यकता है)। यह निश्चित रूप से सीएसएस से संबंधित है और मुझे लगता है कि मैंने इसे कुछ गुणों तक सीमित कर दिया है जो पाठ प्रदान किए जाने के तरीके पर विनाश को खत्म कर देते हैं। वे हैं:

-webkit-transform-style: preserve-3d; 
-webkit-transform: rotateY(180deg); 
-webkit-transform: rotateY(180deg); 
-webkit-perspective: 2500; 

जैसे ही मैं इन अक्षम करें, क्योंकि (उन लोगों के साथ एक "x" लगाकर, उदा x-webkit-* द्वारा), पाठ ठीक हो जाता है। उनमें से किसी भी एक को सक्षम करने के परिणामस्वरूप बोर्क किए गए टेक्स्ट में परिणाम मिलता है। यहां कुछ स्क्रीनशॉट हैं जो अंतर को देखने में मदद कर सकते हैं।

http://s3.amazonaws.com/codaset/ticket/6404/665/good.pnghttp://s3.amazonaws.com/codaset/ticket/6404/666/bad.png

किसी को भी किसी भी विचार क्या यह कारण हो सकता है या यदि/यह कैसे तय किया जा सकता है है? Google बहुत मददगार नहीं रहा है।

धन्यवाद।

Answer 1

सफारी में ट्रांसफॉर्म हार्डवेयर-त्वरित हैं। यह बहुत बेहतर गति के लिए अनुमति देता है, लेकिन प्रतिपादन एक ही पाइपलाइन का पालन नहीं करता है, और कुछ गुणवत्ता खो जाती है। ट्रांसफॉर्म का उपयोग न करने के अलावा, आप इसके बारे में कुछ भी नहीं कर सकते हैं। :/

Answer 2

मुझे लगता है कि -webkit-font-smoothing: antialiased का उपयोग करके बाद में आईओएस संशोधन (मुझे लगता है कि 3.2 & 4.0) में ठीक करना संभव है। नोट: एलियासिंग अभी भी अलग होगा, लेकिन एनिमेटेड होने पर कम अजीब दिखाई देगा।

Answer 3

आज इस मुद्दे पर आया और इसे काम करने के लिए transform: scale(1.1) translate3d(0,0,0); (http://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/) का उपयोग करना पड़ा।