تم إصلاح مشكلة تحديد الموضع مع المراسي وقوائم UL في Google Chrome وOpera

تتناول هذه المقالة مشكلة العرض التي تمت ملاحظتها في متصفحي Google Chrome وOpera حيث قد يختفي الشريط الجانبي ذو الموضع الثابت عند النقر فوق الروابط الأساسية داخل الصفحة. يؤدي وجود عناصر

في الصفحة إلى تفاقم هذه المشكلة.

Chrome Solution

تطبيق خاصية -webkit-transform:ترجمZ(0) على الشريط الجانبي الثابت يعمل العنصر على حل هذه المشكلة في Chrome. تستغل هذه التقنية الفصل بين إعادة الطلاء وعرض CSS عند إجراء تحويلات ثلاثية الأبعاد، مما يخفف من مواطن الخلل في العرض.

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

Opera Solution

تتطلب معالجة هذه المشكلة في Opera أسلوبًا مختلفًا. نحن نستخدم الرسوم المتحركة @keyframes لفرض عمليات إعادة الطلاء المستمرة على خاصية CSS التي تؤثر على التخطيط ولكن ليس لها أي تأثير عملي على مظهر الصفحة. في هذه الحالة، نقوم بتحريك خاصية الهامش السفلي:

@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}

من المهم ملاحظة أن هذا الحل ليس خاليًا من العيوب. في بعض الحالات، قد يحدث وميض قصير عندما يفقد الشريط الجانبي موضعه ويعاد رسمه بسرعة. يعد سلوك Opera الجوهري بين عمليات إعادة الرسم هو المسؤول عن هذه المشكلة.

اعتبارات إضافية

أظهرت المواجهات اللاحقة مع هذا الخطأ حدوثًا متكررًا في الحالات التي يتم فيها تطبيق تحويل ثلاثي الأبعاد بالفعل على الجسم أو العنصر الأم. يمكن أن تؤدي هذه الممارسة، التي تُستخدم غالبًا لفرض عرض GPU، إلى مشكلات عرض مستمرة. فكر في إزالة التحويلات ثلاثية الأبعاد الحالية قبل تنفيذ الحلول المقدمة أعلاه.

يتعامل الآن Google Chrome وOpera مع تحديد المواقع الثابتة مع تحسين الاستقرار. لقد أثبتت هذه الإصلاحات فعاليتها في حل مشكلات العرض المرتبطة باستخدام عناصر UL على الصفحة.