ट्रांसफॉर्मेशन के बाद क्रोम में टेक्स्ट का धुंधलापन: स्केल()

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

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

क्रोम में rourkery.com पर जाने से मुख्य टेक्स्ट क्षेत्र में समस्या का पता चलता है, जबकि अन्य वेबकिट ब्राउज़र (जैसे सफारी) अप्रभावित लगते हैं।

धुंधले टेक्स्ट की समस्या का समाधान

इस समस्या को हल करने के लिए, दो दृष्टिकोण हो सकते हैं नियोजित:

1. बैकफेस विजिबिलिटी हिडन: यह तकनीक केवल ऑब्जेक्ट के सामने वाले हिस्से में एनीमेशन को सरल बनाकर, डिफ़ॉल्ट फ्रंट और बैक स्टेट्स को हटाकर समस्या को ठीक करती है।

   backface-visibility: hidden;

2. TranslateZ: यह हैक एनीमेशन के लिए हार्डवेयर त्वरण को सक्रिय करता है, रेंडरिंग समस्या को प्रभावी ढंग से हल करता है।

   transform: translateZ(0);

इसके अलावा, कुछ उपयोगकर्ता निम्नलिखित संपत्ति जोड़ते हुए पाते हैं लाभकारी:

-webkit-font-smoothing: subpixel-antialiased;