गोलाई सीएसएस सब-पिक्सेल रूपांतरण

Question

पर

तो, इस मुद्दे को पहले आ गया है, यहाँ की तरह: Translate + Canvas = Blurry Text और यहाँ: Is it possible to "snap to pixel" after a CSS translate?

वहाँ उन लिंक्स-या किसी अन्य लेख मैं दोनों में से किसी के बारे में कोई निष्कर्ष होना प्रतीत नहीं होता है पढ़ा है कुछ प्रतिसाददाताओं नहीं सोचा था कि यह काफी महत्वपूर्ण देखभाल करने के लिए था, इसलिए यहाँ कारण है कि मेरी स्थिति में है: क्रोम 41.0.2272.104 में स्क्रीनशॉट

सफारी 8.0.4 में (10600.4.10.7) स्क्रीनशॉट

सफारी में विस्तार से नुकसान देखें?

इन लोगों के लिए सीएसएस,

width: 100%; 
height: auto; 
position: relative; 
top: 50%; 
-webkit-transform: translateY(-50%); 

तो है (अंतरिक्ष शटल छवि में संरचना, या 3 छवि में चट्टानों में विस्तार को देखो) इनमें से कुछ स्थितियों-translateY में आधे पिक्सेल में खत्म हो जाएगा। बाईं तरफ पहली छवि इतनी तरह एक को बदलने मैट्रिक्स के साथ समाप्त होता है:

-webkit-transform: matrix(1, 0, 0, 1, 0, -56.5); 

वर्तमान समय में, यह क्रोम इस अच्छी तरह से प्रदर्शित हो रहा है (मैं देखा है कुछ लोगों का कहना है कि विभिन्न ब्राउज़रों विभिन्न संस्करणों में मुद्दा बनाने लगता है), लेकिन वर्तमान में सफारी को समस्या है। इसलिए, इस मुद्दे को ठीक करने की मेरी धारणा यह सुनिश्चित करना है कि केवल पूरे पिक्सेल हैं, जिन्हें मैंने गणित करके पहले से ही किया है और जावास्क्रिप्ट में परिवर्तन लागू कर रहा है, लेकिन कई छवियों पर चलने पर प्रदर्शन समय में यह अधिक खर्च होता है ।

मैंने कुछ सीएसएस-केवल हैक की कोशिश की है जैसे कि सफलता के साथ स्केल 3 डी का उपयोग करना। अगर किसी के पास कोई जेएस-मुक्त समाधान है, तो मैं साझा ज्ञान की सराहना करता हूं।

Answer 1

कुछ ब्राउज़रों में आप calc से चल बिन्दु राउंडिंग त्रुटियों निकटतम वेतन वृद्धि वांछित करने के लिए अपना नंबर पूर्णांक बनाना का लाभ ले सकते:

calc((2.55px * 5e-324)/5e-324) 

कारण चाहिए 2.55px 3px तक बढ़ाना करने के लिए। यह कुछ ब्राउज़रों में काम करता है के रूप में आप नीचे दिए गए चार्ट में देख सकते हैं:

तो, ऊपर ऊपर चार्ट के अनुसार, समर्थन ब्राउज़रों क्रोम और ओपेरा कर रहे हैं। मैं सफारी के बारे में अनिश्चित हूं। शुक्र है, असमर्थित ब्राउज़र, आईई & फ़ायरफ़ॉक्स, केवल कैल्क को अमान्य संपत्ति मान के रूप में अवहेलना करें। इसलिए, इसका उपयोग करने के लिए, बस अपनी आवश्यकताओं को सुइट करने के लिए सीएसएस उत्पन्न करने के लिए नीचे दिए गए उदाहरण का उपयोग करें। हां, मुझे पता है कि यह जनरेटर हमेशा समान शब्दों को गठबंधन नहीं करता है, और हां, एक कारण है: उन शब्दों को संयोजित करने से एक संख्या संग्रहित करने में असमर्थ होगी।

var unit=document.getElementById('unit'), 
 
\t \t precision=document.getElementById('precision'), 
 
\t \t property=document.getElementById('prop'), 
 
\t \t output=document.getElementById('output'); 
 
    function formatProp(x){ 
 
    return (property.value.indexOf('%s') ? 
 
      property.value.replace(/%s/g, x) : 
 
      proprty.value + x).replace(/\\n/g, '\n') 
 
    .replace(/\\t/g, '\t').replace(/\\r/g, '\r'); 
 
    } 
 
\t (unit.oninput = precision.oninput = property.oninput = function(){ 
 
\t \t var Val = parseFloat(precision.value), V1="5e-324", V2="5e-324"; 
 
\t \t if (Val < 1) 
 
\t \t \t V1 = V2 = '' + 5e-324/Val; 
 
\t \t else if (Val > 1) 
 
\t \t \t V2 += ' * ' + Val, V1 += '/' + Val; 
 
    
 
\t \t output.textContent = formatProp(unit.value) + ';  /* for IE and FF*/\n' + formatProp('calc((' + unit.value + ' * ' + V1 + ')/' + V2 + ')') + ';'; 
 
\t })();

CSS Unit: <input type="text" id="unit" value="-50%" style="width:14em"/><br /> 
 
Property : <input type="text" id="prop" value="-webkit-transform: translateY(%s);\ntransform: translateY(%s)" style="width:40em"/><br /> 
 
Round to: <input type="number" id="precision" value="1" style="width:14em"/> pixels (can be decimal)<b5 /> 
 
<pre id="output" style="background:#eee"> </pre>

कृपया ध्यान दें कि वास्तविक समय की बहुभाषी परिभाषा उत्तरदायी के रूप में, हाँ, आप अपने खुद के मूल्यों में डेमो में ऊपर दर्ज कर सकते हैं, और हाँ, इसी सीएसएस होगा रीयलटाइम उत्पन्न किया जाना चाहिए।

मेरे परीक्षण पृष्ठ मैं बनाया: purposeful-rounding-errors browser support test

कृपया ध्यान दें कि चार्ट के ऊपर वर्तमान में समर्थन करने वाले ब्राउज़र सुविधाओं, यह बहुत ज्यादा है क्योंकि राउंडिंग त्रुटियों का उपयोग गैर मानक की तरह है परिवर्तन के अधीन है: केवल W3C कल्पना उन्हें फ़्लोटिंग पॉइंट नंबर की परिभाषा में इंगित करता है, लेकिन यह कभी स्पष्ट रूप से यह नहीं बताता है कि ब्राउज़र को उप-सामान्य फ़्लोटिंग पॉइंट नोटेशन या राउंडिंग त्रुटियों को लागू करने की आवश्यकता है।