Avertissement avancé d'une modification du comportement CSS susceptible de provoquer un débordement indésirable.
À partir de Chrome 108, les éléments remplacés suivants respectent la propriété de dépassement: img, video et canvas. Dans les versions précédentes de Chrome, cette propriété était ignorée pour ces éléments.
Cela signifie qu'une image qui était auparavant rognée sur sa zone de contenu peut désormais dessiner en dehors de ces limites si cela est spécifié dans une feuille de style. Par défaut, la feuille de style du navigateur affiche le dépassement dans la zone de contenu en respectant les règles suivantes:
img {
overflow: clip;
overflow-clip-margin: content-box;
}
Cependant, il est possible que votre feuille de style ignore ce comportement en définissant overflow: visible. Les exemples suivants illustrent des cas de dépassement indésirables.
La propriété object-fit permet de mettre l'image à l'échelle et de remplir la zone. Si les proportions ne correspondent pas à celles du cadre, l'image est dessinée en dehors des limites.
img {
object-fit: cover;
overflow: visible;
}
La propriété border-radius donne à une image carrée l'aspect d'un cercle, mais comme overflow est visible, le découpage n'a plus lieu.
img {
border-radius: 50% 50%;
overflow: visible;
}
Définir inherit: all et faire hériter de toutes les propriétés, y compris overflow.
img {
all: inherit;
}
Solution
Si cette modification signifie que vous constatez un dépassement indésirable et que le remplacement de la propriété "overflow" par "visible" n'est pas intentionnel, inspectez le CSS appliqué à l'élément via les outils de développement. Cela devrait vous permettre d'identifier la déclaration CSS qui remplace la propriété overflow sur visible, et de la supprimer ou de la remplacer par clip.
img {
overflow: clip;
}
S'il n'est pas simple de mettre à jour le CSS, une autre solution consiste à ajouter le style intégré suivant à l'élément.
<img style="overflow:clip !important">