CSS संक्रमण के दौरान Webkit टेक्स्ट रेंडरिंग परिवर्तन को कैसे रोका जाए

Question

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

फिडल: http://jsfiddle.net/russelluresti/UeNFK/

मैंने यह भी देखा कि यह मेरे हेडर पर नहीं होता है, जिनके पास -webkit-font-smoothing: antialiasedसंपत्ति / मूल्य जोड़ी है। इसलिए, मैं सोच रहा हूं, क्या पाठ को डिफ़ॉल्ट रूप से बनाए रखने का कोई तरीका है (फ़ॉन्ट-स्मूथिंग के लिए "ऑटो" मूल्य) और संक्रमण के दौरान रेंडरिंग को बदलना नहीं है।

मैंने "ऑटो" मान का उपयोग करने के लिए पाठ को स्पष्ट रूप से सेट करने की कोशिश की है, लेकिन वह कुछ भी नहीं करता है। मुझे यह भी ध्यान देना चाहिए कि "कोई नहीं" के लिए फ़ॉन्ट-स्मूथिंग सेट करना भी संक्रमण के दौरान रेंडरिंग ब्लिंक को रोकता है।

किसी भी मदद की सराहना की है।

संपादित करें 1

मुझे ध्यान देना चाहिए कि मैं ओएस एक्स पर हूं। क्रोम पर समानताएं में मेरे परीक्षण को देखते हुए, मैंने दो अलग-अलग पैराग्राफ को अलग-अलग व्यवहार नहीं देखा, इसलिए यह मैक के लिए विशेष रूप से एक मुद्दा हो सकता है।

Comments

21. और सफारी संस्करण 6 है। यह दोनों ब्राउज़रों में होता है, जो मुझे लगता है कि यह वेबकिट है, और ब्राउज़र नहीं।

— रसेलुइस्टेरी

दोनों पुराने और अलियास किए गए पैराग्राफ समान व्यवहार प्रदर्शित कर रहे हैं। क्रोम संस्करण 23.0.1270.0 कैनरी | 21.0.1180.89 मीटर | 5.17 सफारी

मैं अनुमान लगा रहा हूं कि आप Chrome की रिलीज़ पर हैं। हालाँकि, OS इसमें एक भूमिका निभा सकता है। मैं इस सवाल पर ध्यान दूंगा कि मैं OSX का उपयोग कर रहा हूं।

— रसेलुइस्टी

मुझे पूरी तरह से पता नहीं है कि यह क्यों काम करता है, लेकिन '-webkit-transform: TranslateZ (0);' '.antialiased {} को इसे ठीक करना प्रतीत होता है। यदि आप इसे 'p {}' से जोड़ते हैं तो भी यह काम करता है। चूंकि मैं यह नहीं समझा सकता हूं कि यह काम क्यों करता है इसलिए इसे उत्तर के रूप में प्रदान करना सही नहीं लगा। उम्मीद है की वो मदद करदे!

— क्रिस्टोफर विलेंडर

@Christofer जो उन्हें सुसंगत बनाता है - लेकिन यह उन सभी को एंटीअलियास (वे सभी पतले पाठ) दिखाई देते हैं। मैं संयुक्त राष्ट्र-विरोधी पाठ बनाने की कोशिश कर रहा हूं (पहला पैराग्राफ) इसमें डिफ़ॉल्ट शैली में रहना है (जो कि एंटीअलियासिड पाठ की तुलना में थोड़ा सा फ़ोल्डर दिखाई दे रहा है)।

— रसेलयूएस्टी सेप

Answer 1

मुझे लगता है कि मुझे एक समाधान मिला:

-webkit-transform: translateZ(0px);

मूल तत्व पर हार्डवेयर त्वरण की समस्या को हल करने के लिए लगता है ...

संपादित करें टिप्पणी के रूप में, यह हैक फॉन्ट-स्मूथिंग को अक्षम करता है और आपके फोंट, ब्राउज़र और ओएस के आधार पर पाठ रेंडरिंग को नीचा दिखा सकता है!

Comments

फ़ॉन्ट-चौरसाई की कोशिश की और यह काम नहीं किया। कोशिश की, यह पूरी तरह से काम किया

— locrizak

इसने मुझे इस बताए गए मुद्दे के लिए वांछित परिणाम नहीं दिया, लेकिन इससे मुझे आपके द्वारा की गई अन्य CSS संक्रमण समस्याओं को ठीक करने में मदद मिली है (जैसे कि अजीब ब्लिंकिंग पाठ जब छिपाना / संक्रमण तत्व के भीतर सामग्री दिखाना)।

— रसेलयूएस्टीटी

मेरे लिए काम नहीं करता है जबकि -webkit- फ़ॉन्ट-चौरसाई: antialiased; और -webkit- बैकफेस-दृश्यता: छिपा हुआ; काम करता है। क्रेडिट्स यहां जाएं stackoverflow.com/questions/11589985/…

— F Lekschas

+1 भयानक, यह एकमात्र तरीका है जो उस स्थिति के लिए काम करता है जो मैंने खुद को पाया

— लैरी

यह पहली बार में फ़ॉन्ट-स्मूथिंग को अक्षम करता है। इसलिए आपके पास संक्रमण की शुरुआत में कोई फ़ॉन्ट-चौरसाई नहीं है, संक्रमण के दौरान कोई फ़ॉन्ट-चौरसाई नहीं है और अंत में कोई फ़ॉन्ट-चौरसाई नहीं है। इसलिए कोई फॉन्ट-स्मूथिंग परिवर्तन नहीं, लेकिन फॉन्ट-स्मूथिंग भी बिल्कुल नहीं।

— योजन

Answer 2

अद्यतन अगस्त 2020

सबपिक्सल फ़ॉन्ट स्मूथिंग को सक्षम करने के लिए अब आपको सफारी को मीडिया क्वेरी के साथ लक्षित करने की आवश्यकता नहीं है। डिफ़ॉल्ट ठीक है।

हालाँकि , हालांकि यह डिफ़ॉल्ट रूप से सबपिक्सल फॉन्ट स्मूथिंग का उपयोग करता है, लेकिन पाठ के सुसंगत प्रतिपादन की तलाश में किसी के लिए भी क्रोम के फॉन्ट स्मूथिंग में मरहम में एक महत्वपूर्ण मक्खी है ।

1. यह क्रोम की अंधेरे पृष्ठभूमि पर प्रकाश पाठ का प्रतिपादन है
2. यह क्रोम की एक हल्की पृष्ठभूमि पर अंधेरे पाठ का प्रतिपादन है

ऊपर दिए गए अक्षर ई में पूरे के आकार को देखें। डार्क बैकग्राउंड पर लाइट टेक्स्ट एक लाइट बैकग्राउंड (समान सीएसएस फॉन्ट स्टाइलिंग के साथ) पर डार्क टेक्स्ट की तुलना में एक अवधारणात्मक रूप से भारी वजन के साथ प्रस्तुत किया गया है।

उपयोगकर्ता की डार्क / लाइट थीम सेटिंग का सम्मान करने वाली साइटों के लिए, एक समाधान, क्रोम को एक मीडिया क्वेरी के साथ लक्षित करना है जो डार्क मोड तक सीमित है और इसे नॉन सबपिक्सल स्मूथिंग पर स्विच करना है:

@media screen
and (-webkit-min-device-pixel-ratio: 0)
and (min-resolution: 0.001dpcm)
and (prefers-color-scheme: dark) {
  body {
    -webkit-font-smoothing: antialiased;
  }
}

परिणाम :

एक अधिक सुसंगत पाठ वजन चाहे प्रकाश पर अंधेरे या अंधेरे पर प्रकाश प्रदान कर रहा हो।

पहले और बाद की तुलना में साइड-बाय-साइड की जाँच करें:

-

UPDATE मई 2018

-webkit-font-smoothing: subpixel-antialiasedअब क्रोम में कोई प्रभाव नहीं है, लेकिन सफारी में यह अभी भी चीजों को बेहतर बनाता है, लेकिन केवल रिटेन पर बहुत कुछ करता है। इसके बिना सफारी में रेटिना स्क्रीन पर टेक्स्ट पतला और ढीठ होता है, जबकि इसके साथ, टेक्स्ट में उचित वजन होता है। लेकिन अगर आप इसका उपयोग सफारी में गैर-रेटिना डिस्प्ले पर करते हैं (विशेषकर हल्के वजन मूल्यों पर) पाठ एक आपदा है। मीडिया-क्वेरी का उपयोग करने की दृढ़ता से अनुशंसा करें:

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  body {
    -webkit-font-smoothing: subpixel-antialiased;
  }
}

---

-webkit-font-smoothing: subpixel-antialiasedयदि आप कम से कम आंशिक रूप से एंटीअलियासिड पाठ से बचना चाहते हैं तो स्पष्ट रूप से सेटिंग सबसे अच्छा वर्तमान समाधान है।

--tl; dr--

सफ़ारी और क्रोम दोनों के साथ जहां डिफ़ॉल्ट फॉन्ट रेंडरिंग सबपिक्सल-एंटीलियासिंग का उपयोग करता है, कोई भी सीएसएस जो GPU आधारित रेंडरिंग को मजबूर करता है, जैसे ट्रांसलेशन का उपयोग करने के लिए ऊपर दिए गए सुझावों की तरह या यहां तक ​​कि केवल एक स्केल ट्रांस्फ़ॉर्म के लिए, सफ़ारी और क्रोम को स्वचालित रूप से "छोड़" देगा। "सबपिक्सल-एंटीअलियासिड फ़ॉन्ट स्मूथिंग पर और बदले में सिर्फ एंटीएलियास टेक्स्ट पर स्विच करें, जो बहुत हल्का और पतला दिखता है, खासकर सफारी पर।

अन्य प्रतिक्रियाओं ने केवल थान-रोधी पाठ के लिए फ़ॉन्ट-स्मूथिंग को सेट या मजबूर करके एक निरंतर प्रतिपादन बनाए रखने पर ध्यान केंद्रित किया है। ट्रांसजेड या बैकफेस के छिपे हुए उपयोग से मेरी आँख में टेक्स्ट रेंडरिंग की क्वालिटी ख़राब हो जाती है और सबसे अच्छा समाधान यह है कि अगर आप चाहते हैं कि टेक्स्ट सिर्फ़ संगत रहे और आप पतले टेक्स्ट के साथ ओके हो जाएँ -webkit-font-smoothing: antialiased। हालांकि, स्पष्ट रूप से सेटिंग -webkit-font-smoothing: subpixel-antialiasedका वास्तव में कुछ प्रभाव पड़ता है - पाठ अभी भी थोड़ा बदलता है और बस GPU पर प्रस्तुत किए गए परिवर्तनों के दौरान दृष्टिहीन रूप से पतला होता है, लेकिन इस सेटिंग के बिना जितना पतला नहीं होता है। तो यह इस तरह दिखता है कि कम से कम आंशिक रूप से सीधे एंटीलेसिअस पाठ पर स्विच को रोकता है।

Comments

एक महान राइटअप के लिए धन्यवाद!

— डेनिस गोर्बाचेव

यह सबसे अच्छा उपाय है। अन्य सभी पाठ प्रतिपादन को नीचा दिखाते हैं, जो कि ओपी को विशेष रूप से बचने के

— 8

मेरे लिए जीवन रक्षक! धन्यवाद। अवशिष्ट रूप से एक सीएसएस संक्रमण के बाद उप पिक्सेल रेंडरिंग पर स्विच करने से बचा जाता है। कम से कम अपारदर्शिता संक्रमण के साथ यह संक्रमण के दौरान भी (सैद्धांतिक रूप से हमेशा डिफ़ॉल्ट) उप पिक्सेल रेंडरिंग पर फ़ॉन्ट को बनाए रखता है। महान!

— गरवानी

हमारे लिए सबसे अच्छा समाधान! धन्यवाद

— कर्नेल

धन्यवाद, मैं इस पर एक साल पहले आया था और इसके बारे में सब भूल गया। यह एकमात्र समाधान है जिसने मेरे लिए वर्णित मुद्दे को हल किया है।

— इयान कॉलिंस

Answer 3

मैंने देखा है कि हर बार जब मैं ग्राफिक्स मुद्दों (चंचलता / हकलाना / तड़पना / आदि) के कारण एक संक्रमण के कारण, -webkit-backface- दृश्यता का उपयोग कर रहा है: छिपा हुआ; जिन तत्वों पर कार्रवाई हो रही है, वे समस्या को हल करने की कोशिश करते हैं।

Comments

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

— मन्त्री

इससे कुछ पाठ मेरे लिए धुंधले हो गए।

— जॉन

Answer 4

हार्डवेयर-त्वरण के कारण पाठ रेंडरिंग परिवर्तनों को रोकने के लिए, आप या तो:

1. सभी टेक्स्ट को -webkit-font-smoothing: antialiased पर सेट करें। इसका मतलब है कि पाठ पतला है और उप-पिक्सेल एंटीलियास नहीं है।

2. यदि आप ऐसा टेक्स्ट चाहते हैं जो हार्डवेयर-एक्सेलेरेशन से प्रभावित हो रहा हो, तो उप-पिक्सेल एंटीलियास (फॉन्ट स्मूथिंग का डिफ़ॉल्ट प्रकार) हो सकता है, फिर उस टेक्स्ट को बिना किसी इनपुट के, बिना बॉर्डर और डिसेबल किए, उस सब-पिक्सेल एंटी-डायलेस्ड (कम से कम) रखेगा। Mac OS X पर Chrome)। मैंने अन्य प्लेटफार्मों पर इसका परीक्षण नहीं किया है, लेकिन अगर उप-पिक्सेल एंटीएलियासिंग महत्वपूर्ण है, तो आप कम से कम इस चाल का उपयोग कर सकते हैं।

Comments

मैंने Win8.1 और Chrome 47 पर विकल्प 2 (इनपुट तत्व के साथ चाल) का परीक्षण किया है और यह काम नहीं करता है।

— पय

Answer 5

यदि आप मैक पर फ़ायरफ़ॉक्स का उपयोग कर रहे हैं, तो आप समस्या को ठीक करने के लिए निम्नलिखित सीएसएस का उपयोग करना चाहेंगे।

-moz-osx-font-smoothing: grayscale;

इस पर अधिक फ़ायरफ़ॉक्स और ओपेरा में Webfont चौरसाई और Antialiasing

Answer 6

इसी से मेरा काम बना है। आशा करता हूँ की ये काम करेगा। अन्य stackoverflow पोस्ट में मिला।

-webkit-font-smoothing:antialiased;
-webkit-backface-visibility:hidden;

Answer 7

रेंडरिंग परिवर्तन को रोकने के लिए आपको सेट font-smoothing: antialiased(या none) करने की आवश्यकता है ।

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

एप्पल अक्सर अक्षम उपपिक्सेल पर फ़ॉन्ट चौरसाई उनकी खुद की साइटों।

Comments

फोंट-स्मूदी को एंटीअलियाड्स पर सेट करने में समस्या यह है कि टेक्स्ट ऐसा नहीं दिखता है जैसा मैं चाहता हूं। मैं "ऑटो" (बोल्डर लुक) के लिए फ़ॉन्ट-स्मूथिंग सेट करने का दृश्य प्रभाव चाहता हूं - लेकिन जब आप ऐसा करते हैं, तो पाठ किसी भी संक्रमण के दौरान स्थानांतरित हो जाएगा। इसलिए, मेरा लक्ष्य हर समय "ऑटो" के बोल्ड लुक को बनाए रखना है।

— रसेलुइस्टी सेप

आप हार्डवेयर त्वरण का उपयोग न करके इसके चारों ओर काम कर सकते हैं। JQuery में एक टाइमर का उपयोग करें और हाथ से संक्रमण (सीएसएस संक्रमण के बिना) करें। मुझे यकीन नहीं है कि मैं इसकी सिफारिश करूंगा, क्योंकि प्रदर्शन और चिकनाई बदतर होगी।

— हेनरिक

सच है, मैं सिर्फ jQuery का उपयोग करने के लिए यह चेतन कर सकते हैं ... यह एकमात्र समाधान हो सकता है अगर कोई अन्य समाधान नहीं है।

— रसेलुलेस्टी

Answer 8

उपरोक्त समाधानों के अलावा ( -webkit-transform: translateZ(0px)तत्व पर, और -webkit-font-smoothing: antialiasedपृष्ठ पर) कुछ तत्व अभी भी बुरी तरह से व्यवहार कर सकते हैं। मेरे लिए यह एक इनपुट तत्व में प्लेसहोल्डर टेक्स्ट था: इसके लिए, उपयोग करेंposition:relative

Answer 9

मुझे भी यही समस्या थी। इसे ध्यान से पढ़ें:

मुझे लगता है कि जब तत्व संक्रमण कर रहा है, तो पृष्ठ के शेष पाठ (वेबकिट में) संक्रमण होने तक इसके प्रतिपादन को थोड़ा बदल देता है।

ऊपर दिए गए समाधानों में से कोई भी काम नहीं करता था। हालाँकि, सेटिंग (जैसी चीज़ें)

#myanimation { -webkit-transform: translateZ(0px); }

उस तत्व पर, जिसका एनीमेशन काम करता है।

जीपीयू लेयर में एनिमेटेड एलिमेंट को ले जाकर आप इसे पेज रेंडरिंग के सामान्य प्रवाह से बाहर निकालते हैं (जैसे कि z- इंडेक्स जैसी चीजें भी अब काम नहीं करेंगी, उदाहरण के लिए)। एक साइड इफेक्ट के रूप में, एनीमेशन और बाकी पेज अभ्यस्त अब प्रत्येक को प्रभावित करते हैं।

यदि यह आपके फॉन्ट रेंडरिंग को प्रभावित करता है, तो यह केवल एनिमेटेड एलिमेंट के लिए करता है। मुझे अपने Chrome में अंतर दिखाई नहीं दे रहा है।

Comments

मुझे सही साबित होना है। मुझे शेष पृष्ठ में फ़ॉन्ट रेंडरिंग में परिवर्तन दिखाई देते हैं, उन स्थानों पर भी जहां ट्रांसज़ेड (0) लागू नहीं है।

— कॉमनपाइक

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

— बिल

यार, यह 2 साल पहले ही जवाब दे दिया गया था। ठीक ऊपर ... ठीक वही उत्तर / कोड।

— NiCk न्यूमैन

हां, मेरा एकमात्र बिंदु यह था कि आपके पास -webkit-transformउस तत्व को डालना होगा जिसमें एनीमेशन है , पृष्ठ पर अन्य तत्वों पर परिवर्तन को रोकने के लिए । लेकिन जैसा कि टिप्पणी की गई है, इसने थोड़ी देर के लिए काम किया और बाद में पृष्ठ के बिट्स बदलने पर मैंने काम करना बंद कर दिया।

— कॉमनपाइक