تغيير في تجاوز العناصر التي تم استبدالها في CSS

تحذير متقدم بشأن تغيير في سلوك خدمة مقارنة الأسعار (CSS) قد يؤدي إلى تجاوز الحد الأقصى غير المرغوب فيه.

بدءًا من الإصدار 108 من Chrome، تلتزم العناصر البديلة التالية بالسمة الكاملة: img وvideo وcanvas. في الإصدارات السابقة من Chrome، تم تجاهل هذه السمة على هذه العناصر.

هذا يعني أن الصورة التي تم اقتصاصها سابقًا في مربع المحتوى الخاص بها يمكن الآن رسمها خارج تلك الحدود إذا تم تحديدها للقيام بذلك في ورقة أنماط. تقوم ورقة أنماط المتصفح الافتراضية باقتصاص تجاوز التجاوز إلى مربع المحتوى باستخدام القواعد التالية:

img {
  overflow: clip;
  overflow-clip-margin: content-box;
}

ومع ذلك، من الممكن أن تتجاهل ورقة الأنماط هذا السلوك من خلال ضبط overflow: visible. تعرض الأمثلة التالية بعض الحالات التي قد ترى فيها الآن فائض سعة غير مرغوب فيها.

تُستخدَم السمة object-fit لتغيير حجم الصورة وملء المربّع. وإذا لم تتطابق نسبة العرض إلى الارتفاع مع المربّع، سيتم رسم الصورة خارج الحدود.

img {
  object-fit: cover;
  overflow: visible;
}

تُظهر السمة border-radius الصورة المربّعة على شكل دائرة، ولكن بسبب ظهور السمة overflow، لم يعُد الاقتصاص يحدث.

img {
  border-radius: 50% 50%;
  overflow: visible;
}

إعداد inherit: all والتسبب في اكتساب جميع المواقع، بما في ذلك overflow.

img {
  all: inherit;
}

الحل

إذا كان هذا التغيير يعني ظهور فائض غير مرغوب فيه، وكان إلغاء سمة overflow إلى "مرئي" غير مقصود، يجب فحص لغة CSS المطبَّقة على العنصر من خلال "أدوات مطوّري البرامج". من المفترَض أن يتيح لك ذلك تحديد بيان CSS الذي يلغي سمة overflow إلى visible وإزالته أو تعديله إلى clip.

img {
    overflow: clip;
}

إذا لم يكن تحديث CSS بسيطًا، هناك حل آخر وهو إضافة النمط المضمّن التالي إلى العنصر.

<img style="overflow:clip !important">