Perubahan pada tambahan pada elemen yang diganti di CSS

Peringatan lanjutan tentang perubahan perilaku CSS yang dapat menyebabkan overflow yang tidak diinginkan.

Mulai Chrome 108, elemen yang diganti berikut akan mengikuti properti tambahan: img, video, dan canvas. Pada Chrome versi sebelumnya, properti ini diabaikan pada elemen tersebut.

Ini berarti bahwa gambar yang sebelumnya terpotong ke kotak kontennya sekarang bisa digambar di luar batas-batas tersebut jika ditetapkan untuk melakukannya di style sheet. Lembar gaya browser default mengklip overflow ke kotak konten dengan aturan berikut:

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

Namun, stylesheet Anda dapat mengganti perilaku ini dengan menyetel overflow: visible. Contoh berikut menunjukkan beberapa kasus saat Anda mungkin melihat tambahan yang tidak diinginkan.

Properti object-fit digunakan untuk menskalakan gambar dan mengisi kotak. Jika rasio aspek tidak cocok dengan kotak, gambar akan digambar di luar batas.

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

Properti border-radius membuat gambar persegi terlihat seperti lingkaran, tetapi karena overflow dapat dilihat, pemotongan tidak akan terjadi lagi.

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

Menetapkan inherit: all dan menyebabkan semua properti mewarisi, termasuk overflow.

img {
  all: inherit;
}

Solusi

Jika perubahan ini berarti Anda melihat overflow yang tidak diinginkan, dan mengganti properti overflow agar terlihat tidak disengaja, periksa CSS yang diterapkan ke elemen melalui DevTools. Tindakan ini akan memungkinkan Anda mengidentifikasi deklarasi CSS yang menggantikan properti tambahan ke visible dan menghapusnya atau memperbaruinya menjadi clip.

img {
    overflow: clip;
}

Jika memperbarui CSS tidak mudah, perbaikan lainnya adalah menambahkan gaya inline berikut ke elemen.

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