Una advertencia avanzada de un cambio en el comportamiento del 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 antes se recortó en su cuadro de contenido ahora puede dibujar fuera de esos límites si se especifica en una hoja de estilo. La hoja de estilo del navegador predeterminado recorta el desbordamiento en el cuadro de contenido con las siguientes reglas:
img {
overflow: clip;
overflow-clip-margin: content-box;
}
No obstante, tu hoja de estilo puede anular este comportamiento si configuras overflow: visible. En los siguientes ejemplos, se muestran algunos casos en los que es posible que ahora veas 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 recuadro, la imagen se dibujará fuera de los límites.
img {
object-fit: cover;
overflow: visible;
}
La propiedad border-radius hace que una imagen cuadrada parezca un círculo, pero como overflow es visible, ya no se produce el recorte.
img {
border-radius: 50% 50%;
overflow: visible;
}
Configura inherit: all y haz que se hereden todas las propiedades, incluida overflow.
img {
all: inherit;
}
Solución
Si este cambio significa que ves un desbordamiento no deseado y anular la propiedad de desbordamiento para que sea 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 a visible y quitarla o actualizarla a clip.
img {
overflow: clip;
}
Si la actualización del CSS no es trivial, otra solución es agregar el siguiente estilo intercalado al elemento.
<img style="overflow:clip !important">