Perubahan pada tambahan pada elemen yang diganti di CSS

Peringatan lanjutan terkait perubahan perilaku CSS yang mungkin menyebabkan overflow yang tidak diinginkan.

Mulai Chrome 108, elemen yang diganti berikut mematuhi properti tambahan: img, video, dan canvas. Di Chrome versi sebelumnya, properti ini diabaikan pada elemen berikut.

Artinya, gambar yang sebelumnya diklip ke kotak kontennya kini dapat menggambar di luar batas tersebut jika ditentukan untuk melakukannya dalam lembar gaya. Lembar gaya browser default mengklip menu tambahan ke kotak konten dengan aturan berikut:

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

Namun, stylesheet dapat mengganti perilaku ini dengan menyetel overflow: visible. Contoh berikut menunjukkan beberapa kasus saat Anda mungkin sekarang melihat overflow 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 lagi terjadi.

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

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

img {
  all: inherit;
}

Solusi

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

img {
    overflow: clip;
}

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

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