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

تحذير متقدم عند حدوث تغيير في سلوك CSS والذي قد يؤدي إلى تجاوز السعة غير المرغوب فيها

بدءًا من الإصدار 108 من Chrome، تراعي العناصر التالية التي تم استبدالها خاصية overflow: 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">