CSS'deki değiştirilen öğelerde taşma değişikliği

CSS davranışında, istenmeyen taşmalara neden olabilecek bir değişiklik yapıldığına dair gelişmiş uyarı.

Chrome 108'de, değiştirilen şu öğeler taşma özelliğine uyar: img, video ve canvas. Chrome'un önceki sürümlerinde bu özellik, bu öğelerde göz ardı ediliyordu.

Bu, daha önce içerik kutusuna kırpılan bir resmin, stil sayfasında belirtildiği takdirde artık bu sınırların dışında çizilebileceği anlamına gelir. Varsayılan tarayıcı stil sayfası, aşağıdaki kurallarla taşmayı içerik kutusuna kırpar:

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

Ancak stil sayfanızın overflow: visible ayarlayarak bu davranışı geçersiz kılması mümkündür. Aşağıdaki örneklerde, istenmeyen taşmalar görebileceğiniz bazı durumlar gösterilmektedir.

object-fit özelliği, resmi ölçeklendirmek ve kutuyu doldurmak için kullanılır. En boy oranı kutuyla eşleşmezse resim, sınırların dışına çıkar.

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

border-radius özelliği, kare resmi daire gibi gösterir ancak overflow görünür olduğu için kırpma artık gerçekleşmez.

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

inherit: all ayarını yapma ve overflow dahil olmak üzere tüm mülklerin devralınmasına neden olma.

img {
  all: inherit;
}

Çözüm

Bu değişiklik, istenmeyen taşmalar gördüğünüz anlamına geliyorsa ve taşma özelliğinin görünür olarak geçersiz kılınması bilinçli olarak yapılmıyorsa öğeye uygulanan CSS'yi Geliştirici Araçları ile inceleyin. Bu, visible için taşma özelliğini geçersiz kılan CSS bildirimini tanımlamanıza ve bunu kaldırmanıza veya clip olarak güncellemenize olanak tanır.

img {
    overflow: clip;
}

CSS'yi güncellemek önemsiz değilse bir başka çözüm de aşağıdaki satır içi stili öğeye eklemektir.

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