ضبابية النص في Chrome بعد التحويل: Scale()

في تحديثات Chrome الأخيرة، ظهرت مشكلة غريبة حيث يتم عرض النص باستخدام تحويل CSS : تظهر خاصية المقياس () ضبابية. تمت ملاحظة هذه المشكلة عند استخدام هذا الرمز المحدد:

@-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);
  }
}

تكشف زيارة rorkery.com في Chrome عن المشكلة في منطقة النص الرئيسية، بينما تبدو متصفحات WebKit الأخرى (مثل Safari) غير متأثرة.

حل لمعضلة النص الضبابي

لحل هذه المشكلة، يمكن اتباع طريقتين العاملين:

1. إخفاء رؤية الوجه الخلفي: تعمل هذه التقنية على إصلاح المشكلة عن طريق تبسيط الرسوم المتحركة إلى مقدمة الكائن فقط، مما يؤدي إلى إزالة الحالات الأمامية والخلفية الافتراضية.

   backface-visibility: Hidden;

   backface-visibility: hidden;

2. TranslateZ: هذا الاختراق ينشط تسريع الأجهزة للرسوم المتحركة، حل مشكلة العرض بشكل فعال.

   transform:ترجمZ(0);

   backface-visibility: hidden;