الملخّص
بدءًا من إصدار Chrome 53، تتم إعادة بكسلات جميع المحتوى عند تغيير مقياس التحويل،
إذا لم يكن يحتوي على السمة will-change: transform CSS. وبمعنى آخر، تعني السمة will-change: transform "يُرجى إضافة تأثيرات حركية بسرعة".
وينطبق هذا فقط على مقاييس التحويلات التي تحدث من خلال معالجة النصوص البرمجية، ولا ينطبق على الصور المتحركة في CSS أو الصور المتحركة على الويب.
يعني هذا أنّه من المحتمل أن يحصل موقعك الإلكتروني على محتوى بمظهر أفضل، ولكنه قد يكون أيضًا أبطأ بدون إجراء بعض التغييرات البسيطة الموضّحة أدناه.
تداعيات على مطوّري الويب
وتحت هذا التغيير، يمكن اعتبار will-change: transform أنّه يؤدي إلى تحويل المحتوى إلى صورة نقطية ثابتة، وبالتالي لا تتغير أبدًا عند إجراء تعديلات على عمليات التحويل. يسمح هذا للمطورين بزيادة سرعة تحويل الرسوم
المتحركة على تلك الصورة النقطية، مثل تحريكها أو تدويرها أو
تحجيمها.
لا نفرق بين المقياس وتحويلات الترجمة.
الإجراءات المُقترَحة
فعِّل will-change: transform للعناصر عندما تحتاج إلى تحويل سرعات الصور المتحركة بسرعة (60 لقطة في الثانية بعبارة أخرى)، ومن المتوقّع ألّا يكون إجراء الصور النقطية بجودة عالية في كل إطار سريع بما فيه الكفاية. وفي حال عدم حدوث ذلك، تجنَّب استخدام
will-change: transform.
لتحسين الموازنة بين جودة الأداء، يمكنك إضافة will-change:
transform عند بدء الصور المتحركة وإزالتها عند انتهائها. مع ذلك، عليك الانتباه إلى أنّ إضافة قيمة will-change: transform أو إزالتها تتطلّب عادةً تكلفة كبيرة لمرّة واحدة مقابل أداء الإعلانات.
اعتبارات تنفيذ إضافية
تؤدي إزالة will-change: transform إلى إعادة بكسلات المحتوى على نطاق واضح، ولكن فقط في إطار الصورة المتحركة التالي (عبر requestAnimationFrame)). وبالتالي، إذا كانت لديك طبقة تحتوي على will-change: transform وأردت ببساطة تشغيل إعادة نقطية مع مواصلة الرسم المتحرك بعد ذلك، يجب عليك إزالة will-change:
تحويل، ثم إعادة إضافتها في requestAnimationFrame() cكل استرجاع.
إذا أردت في أي وقت أثناء الحركة إنشاء صورة نقطية على النطاق الحالي،
يمكنك تطبيق التقنية المذكورة أعلاه لإزالة العنصر في إطار واحد، وهو إعادة إضافة will-change:
transform في إطار لاحق.
قد يكون لذلك تأثير جانبي لفقدان المحتوى للطبقة المركّبة،
مما يجعل التوصية المذكورة أعلاه باهظة الثمن إلى حد ما. إذا كان ذلك يمثل مشكلة، ننصحك بإضافة transform: translateZ(0) إلى المحتوى أيضًا لضمان بقائه في طبقة مركّبة أثناء هذه العملية.
ملخّص التأثير
لهذا التغيير آثار على جودة المحتوى المعروض والأداء والتحكّم بالمطوّرين.
- جودة المحتوى المعروض: يكون الإخراج المعروض للعناصر التي تحرّك مقياس التحويل واضحًا تمامًا بشكل تلقائي.
- الأداء: ستكون حركة التحويل عند وجود
will-change: transformسريعة. - تحكُّم المطوِّرين: يمكن للمطوّرين الاختيار بين الجودة والسرعة على أساس كل عنصر ولكل إطار متحرك عن طريق إضافة وإزالة
will-change: transform.
يمكنك الاطّلاع على مستند التصميم المشار إليه أعلاه لمزيد من التفاصيل.
أمثلة
في هذا المثال، سيظل العنصر الذي يتضمّن معرّف
remainsBlurry مموهًا بعد هذا التغيير، إلا أنّ العنصر الذي يحمل
معرّف noLongerBlurry سيصبح واضحًا. ويرجع ذلك إلى أنّ الصفحة الأولى تحتوي على سمة will-
change: transform CSS.
أمثلة على تحويل الرسوم المتحركة على نطاق واسع من تطبيقات حقيقية
- من هذا الخطأ: نمر متأرجح
- "خرائط Google" على الأجهزة الجوّالة (maps.google.com) - تكبير الخريطة أو تصغيرها
- "خرائط Google" على أجهزة الكمبيوتر المكتبية
- خريطة المقاعد في Tiketmaster