تغییر به سرریز در عناصر جایگزین شده در CSS

یک هشدار پیشرفته در مورد تغییر رفتار CSS که ممکن است باعث سرریز ناخواسته شود.

از Chrome 108، عناصر جایگزین شده زیر به ویژگی سرریز احترام می‌گذارند: 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;
}

راه حل

اگر این تغییر به این معنی است که سرریز ناخواسته را مشاهده می‌کنید، و رد کردن ویژگی سرریز برای قابل مشاهده عمدی نیست، CSS اعمال شده روی عنصر را از طریق DevTools بررسی کنید. این باید به شما امکان دهد اعلان CSS را شناسایی کنید که خاصیت سرریز را نادیده می گیرد تا visible باشد و آن را حذف کنید یا آن را به clip به روز کنید.

img {
    overflow: clip;
}

اگر به روز رسانی CSS بی اهمیت نیست، راه حل دیگر اضافه کردن سبک درون خطی زیر به عنصر است.

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