Um aviso avançado sobre uma mudança no comportamento do CSS que pode causar estouro indesejado.
No Chrome 108, os seguintes elementos substituídos respeitam a propriedade de estouro: img, video e canvas. Nas versões anteriores do Chrome, essa propriedade era ignorada nesses elementos.
Isso significa que uma imagem que foi recortada anteriormente na caixa de conteúdo agora pode desenhar fora desses limites, se especificado para isso em uma folha de estilo. A folha de estilo do navegador padrão recorta o estouro da caixa de conteúdo com as seguintes regras:
img {
overflow: clip;
overflow-clip-margin: content-box;
}
No entanto, é possível que sua folha de estilo modifique esse comportamento definindo overflow: visible. Os exemplos a seguir mostram alguns casos em que é possível ocorrer um estouro indesejado.
A propriedade object-fit é usada para dimensionar a imagem e preencher a caixa. Se a proporção não corresponder à caixa, a imagem será desenhada fora dos limites.
img {
object-fit: cover;
overflow: visible;
}
A propriedade border-radius faz com que uma imagem quadrada pareça um círculo, mas como overflow é visível, o recorte não ocorre mais.
img {
border-radius: 50% 50%;
overflow: visible;
}
Definir inherit: all e fazer com que todas as propriedades sejam herdadas, incluindo overflow.
img {
all: inherit;
}
Solução
Se essa mudança fizer com que você observe um estouro indesejado e a substituição da propriedade de estouro para visível não seja intencional, inspecione o CSS aplicado ao elemento pelo DevTools. Isso permite que você identifique a declaração CSS que está substituindo a propriedade overflow para visible e a remova ou atualize para clip.
img {
overflow: clip;
}
Se a atualização do CSS não for simples, outra solução é adicionar o estilo in-line a seguir ao elemento.
<img style="overflow:clip !important">