हार्डवेयर त्वरण

Question

के कारण वेबकिट में धुंधला पाठ के बिना निष्पादन संक्रमण कैसे प्राप्त करें मेरे पास एक बिल्कुल स्थित तत्व है जिसे मैं व्यूपोर्ट में बदल रहा हूं। तत्व में इसके अंदर पाठ है।

• यह बुरा व्यवहार एक तत्व की स्थिति (यानी शीर्ष, बाएं, नीचे, दाएं, मार्जिन, गद्दी) को संक्रमण लागू करने का तरीका: मेरी समझ जैसे है। ऐसा करने से ब्राउज़र को पृष्ठ पर चलने के कारण ब्राउज़र को भारी प्रवाह करने के लिए मजबूर किया जाता है।

• ट्रांसफॉर्म को किसी तत्व में लागू करने का अच्छा अभ्यास है क्योंकि ब्राउजर को फिर से प्रवाह नहीं होता है क्योंकि बॉक्स मॉडल स्थान मूल स्थिति में रहता है।

• वेबकिट ब्राउज़र में किसी तत्व में परिवर्तन को लागू करने से हार्डवेयर त्वरण को मजबूर किया जाता है। (या ऐसा करने के लिए मजबूर किया जा सकता है, यानी अगर ट्रांसफॉर्म करें: translateX तब नहीं है तो आप z-axis 0 के साथ translate3d का उपयोग कर सकते हैं)।

• हार्डवेयर जो त्वरित है उसे वेक्टर के रूप में नहीं माना जाता है। इससे पाठ धुंधला हो जाता है।

मैं this लेख समाधानों पर चर्चा पाया है, लेकिन मैं संतुष्ट नहीं हूँ।

ऐसा लगता है कि तत्व को ट्रांसफॉर्म के साथ संक्रमण करना बेहतर होगा, लेकिन, तत्व एक बार अपने आराम की स्थिति तक पहुंचने के बाद, हार्डवेयर त्वरण से तत्व को हटाने के लिए उसी माप के बाएं/ऊपर के साथ ट्रांसफॉर्म को प्रतिस्थापित करें।

क्या मैं सही रास्ते पर हूं? क्या यहां कोई आसान समाधान है?

एक साधारण उदाहरण के रूप में, इच्छा-परिवर्तन संपत्ति को टॉगल करते समय टेक्स्ट देखें। आप देख सकते हैं कि एक परिवर्तन की प्रत्याशा में टेक्स्ट ब्लर्स होता है, भले ही कोई रूपांतरण नहीं हो रहा हो। यह वही बात है जो तत्व पर एक परिवर्तन को छोड़ने के बाद भी चल रहा है/आगे बढ़ने वाले तत्व के आगे पाठ रखने के बाद भी। क्रोम को एक वेक्टर के रूप में रखने के लिए यह बताना वाकई अच्छा होगा, लेकिन मुझे संदेह है कि सभी मूल तत्वों को पदोन्नत किया जाता है, यही कारण है कि टेक्स्ट बदल जाता है।

$('button').click(function() { 
 
    $('.example').toggleClass('is-blurred'); 
 
});

.example { 
 
    font-size: 24px; 
 
} 
 
.example.is-blurred { 
 
    will-change: transform; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Toggle blur</button> 
 

 
<div class='example'> 
 
    I am some text 
 
</div>

Answer 1

जब सीएसएस संक्रमण समाप्त हो गया है, ब्राउज़र जगह में तत्व रखने के लिए हार्डवेयर संसाधनों का एक बहुत जरूरत नहीं है। तो इसके बारे में चिंता मत करो।