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

İstenmeyen taşmaya neden olabilecek bir CSS davranışı değişikliğiyle ilgili gelişmiş uyarı.

Chrome 108'den itibaren şu değiştirilen öğeler taşma özelliğine uyar: img, video ve canvas. Chrome'un önceki sürümlerinde bu özellik bu öğelerde yoksayılıyordu.

Bu, daha önce içerik kutusuna kırpılmış bir resmin, stil sayfasında belirtilmişse artık bu sınırların dışına çizilebileceği anlamına gelir. Varsayılan tarayıcı stil sayfası, taşan içeriği içerik kutusuna göre kırparak şu kuralları uygular:

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

Ancak, stil sayfanızın bu davranışı overflow: visible ayarlayarak geçersiz kılması mümkündür. Aşağıdaki örneklerde, artık istenmeyen taşmalarla karşılaşabileceğ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şmiyorsa resim, sınırların dışına çizilir.

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

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

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

inherit: all ayarlanıyor ve overflow dahil tüm özelliklerin devralınmasına neden oluyor.

img {
  all: inherit;
}

Çözüm

Bu değişiklik, istenmeyen taşma gördüğünüz anlamına geliyorsa ve taşma özelliğini görünür olarak geçersiz kılmak kasıtlı olarak yapılmamışsa, öğeye uygulanan CSS'yi Geliştirici Araçları ile inceleyin. Bu sayede taşma özelliğini visible olarak geçersiz kılan CSS bildirimini tanımlayabilir ve kaldırabilir veya clip olarak güncelleyebilirsiniz.

img {
    overflow: clip;
}

CSS'yi güncellemek basit değilse diğer bir düzeltme de öğeye aşağıdaki satır içi stili eklemektir.

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