Advertencia avanzada sobre un cambio en el comportamiento de CSS que puede causar un desbordamiento no deseado.
A partir de Chrome 108, los siguientes elementos reemplazados respetan la propiedad de desbordamiento: img, video y canvas. En versiones anteriores de Chrome, esta propiedad se ignoraba en estos elementos.
Esto significa que una imagen que anteriormente se recortó a su cuadro de contenido ahora puede dibujar fuera de esos límites si se especifica para que lo haga en una hoja de estilo. La hoja de estilo predeterminada del navegador recorta el menú ampliado al cuadro de contenido con las siguientes reglas:
img {
overflow: clip;
overflow-clip-margin: content-box;
}
Sin embargo, es posible que tu hoja de estilo anule este comportamiento configurando overflow: visible. En los siguientes ejemplos, se muestran algunos casos en los que podrías ver un desbordamiento no deseado.
La propiedad object-fit se usa para ajustar la escala de la imagen y completar el cuadro. Si la relación de aspecto no coincide con el cuadro, la imagen se dibujará fuera de los límites.
img {
object-fit: cover;
overflow: visible;
}
La propiedad border-radius hace que una imagen cuadrada se vea como un círculo, pero como overflow es visible, el recorte ya no se produce.
img {
border-radius: 50% 50%;
overflow: visible;
}
Configurar inherit: all y hacer que se hereden todas las propiedades, incluido overflow
img {
all: inherit;
}
Solución
Si este cambio implica que ves un desbordamiento no deseado, y la anulación de la propiedad de desbordamiento a visible no es intencional, inspecciona la CSS aplicada al elemento con Herramientas para desarrolladores. Esto debería permitirte identificar la declaración de CSS que anula la propiedad de desbordamiento de visible y quitarla o actualizarla a clip.
img {
overflow: clip;
}
Si actualizar el CSS no es trivial, otra solución es agregar el siguiente estilo intercalado al elemento.
<img style="overflow:clip !important">