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">