क्रोम में फ़ॉन्ट पिक्सेललेट समस्या (एचटीएमएल 5/CSS3)

Question

मुझे एक मुद्दा है कि पाठ को पिक्सलेट किया गया है जब 2 डी स्केल ट्रांसफॉर्म लागू होता है। (मैं केवल क्रोम में परीक्षण किया गया। मैं बाद में पार ब्राउज़ कर क्या करेंगे, ताकि आप विभिन्न ब्राउज़रों पर उसकी जांच की जरूरत नहीं है।)

सीएसएस

.versus_block_hover 
{ 
    -webkit-transform: scale(1.2,1.2)!important; 
    -webkit-transition: 50ms 0ms!important; 
    z-index:1100!important; 
    border-width:1px; 
    border-color:#000; 
    border-style:solid; 
} 

जावास्क्रिप्ट कोड

$('.versus_block').hover(function() { 
    $(this).addClass('versus_block_hover'); 
    $(this).parent().css('z-index','1100'); 
}, function() { 
    $(this).removeClass('versus_block_hover'); 
    $(this).parent().css('z-index','0'); 
}); 

मुझे पता है कि क्रोम 3 डी त्वरण के लिए सीएसएस ट्रांसफॉर्म के दौरान बिटमैप ऑपरेशन का उपयोग करता है। हालांकि, जब मैंने इसे jsfiddle में परीक्षण किया, तो यह पिक्सलेट नहीं किया गया था। चेहरे में, ऐसा लगता है कि संक्रमण पूरा होने पर क्रोम एक पाठ को फिर से खींचता है।

यह उदाहरण देखें। एक बॉक्स पर होवर करें। (मैं अपने वास्तविक साइट से सभी सीएसएस तत्वों डाल दिया।)

http://jsfiddle.net/eCkdE/11/

और, इस एक वास्तविक साइट एक मुद्दा किया है। (होवर करें ब्लॉक के किसी भी है, तो आप pixelated फोंट देख सकते हैं जब यह विस्तार किया है)

http://jsfiddle.net/GJ7BM

किसी को भी एक विचार है कि यह कैसे तय करने के लिए है? यह ठीक है कि आप इसे सीधे मेरे जेएसफ़ाइल पर ठीक कर सकते हैं।

Answer 1

समस्या इस के समान लगता है: http://code.google.com/p/chromium/issues/detail?id=119470

तो क्या वास्तव में समस्या से चलाता है, जब तत्व असमान निर्देशांक पर एक comsposited परत के रूप में प्रदान की गई है है। यदि आप विकल्प chrome://flags में सक्षम करते हैं तो आप देख सकते हैं कि आपके पहले jsfiddle उदाहरण में विभाजन एक संक्रमित परत बन जाता है जबकि संक्रमण प्रगति पर होता है, पाठ पूर्ण हो जाने पर, धुंधला हो जाता है, यह अब संमिश्र नहीं होता है, और पाठ स्पष्ट हो जाता है (इस संशोधित पहेली को देखें जहां सीमा को स्थान देना आसान है: http://jsfiddle.net/kF2Q5/)।

आपके दूसरे jsfiddle उदाहरण में पाठ संक्रमण पूरा होने के बाद भी धुंधला रहता है क्योंकि यह अभी भी एक मिश्रित परत (असमान रूप से असमान समन्वय पर) है, यह इन घोंसले और अंडरलेड ट्रांसफॉर्मों के कारण होता है (एक तत्व जो ऊपर से ऊपर है मिश्रित परत, भी एक मिश्रित परत बन जाता है)। इस संशोधित बेला देखें: http://jsfiddle.net/PqPSU/ सभी रूपांतरण का उपयोग कर अक्षम किया जा रहा है:

* { 
    -webkit-transform: translateX(0) !important; 
} 

तो केवल आगे पीछे करता तत्व पर बदलना छोड़ दिया है। यदि आपने Composited render layer borders विकल्प सक्षम किया है, तो आपको देखना चाहिए कि टाइल के चारों ओर सभी लाल/भूरे रंग की सीमाएं, जो मिश्रित परतों को इंगित करती हैं, को समाप्त किया जाना चाहिए। और आपको यह देखना चाहिए कि एक बार संक्रमण पूरा हो जाने पर पाठ स्पष्ट हो जाता है, जैसे कि आपके पहले उदाहरण में।

दुर्भाग्यवश मेरे पास अंतर्निहित समस्या का कोई समाधान नहीं है, यानी मिश्रित परतों का धुंधला प्रतिपादन, मुझे लगता है कि यह ऐसा कुछ है जिसे इस अंत में हल नहीं किया जा सकता है, लेकिन केवल प्रतिपादन इंजन और/या ग्राफिक्स कार्ड ड्राइवर में ही तय किया जा सकता है , वास्तव में समस्या का कारण बनने के आधार पर।

Answer 2

आप पाठ-प्रतिपादन सीएसएस संपत्ति समायोजित कर सकते हैं। https://developer.mozilla.org/fr/docs/CSS/text-rendering

लेकिन आपका उदाहरण मेरे लिए ठीक काम करता है, दूसरे कंप्यूटर पर जांचें।

आपको अपने ब्राउज़र या अपने ग्राफिक कार्ड ड्राइवर अपडेट करना चाहिए।