Uma mudança no estouro nos elementos substituídos no CSS

Um aviso avançado de uma mudança no comportamento do CSS que pode causar um estouro indesejado.

No Chrome 108, os elementos substituídos abaixo respeitam a propriedade flutuante: img, video e canvas. Nas versões anteriores do Chrome, essa propriedade era ignorada nesses elementos.

Isso significa que uma imagem que antes era cortada 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 na 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 substitua esse comportamento definindo overflow: visible. Os exemplos a seguir mostram alguns casos em que você pode encontrar 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 vai 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 significa que você vê um estouro indesejado e a substituição da propriedade overflow para visível não é intencional, inspecione o CSS aplicado ao elemento pelo DevTools. Isso permite identificar a declaração CSS que está substituindo a propriedade overflow para visible e remover ou atualizar para clip.

img {
    overflow: clip;
}

Caso a atualização do CSS não seja trivial, outra correção é adicionar o estilo inline a seguir ao elemento.

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