Avertissement avancé concernant une modification du comportement CSS susceptible de provoquer un dépassement indésirable.
À partir de Chrome 108, les éléments suivants ont été remplacés pour respecter la propriété "overflow" : img, video et canvas. Dans les versions antérieures de Chrome, cette propriété était ignorée pour ces éléments.
Cela signifie qu'une image précédemment rognée dans sa zone de contenu peut désormais dessiner en dehors de ces limites si elle est spécifiée dans une feuille de style. La feuille de style du navigateur par défaut rogne le débordement sur la zone de contenu en appliquant les règles suivantes:
img {
overflow: clip;
overflow-clip-margin: content-box;
}
Il est toutefois possible pour votre feuille de style d'ignorer ce comportement en définissant overflow: visible. Les exemples suivants illustrent des situations dans lesquelles un dépassement de capacité indésirable peut désormais apparaître.
La propriété object-fit permet de mettre l'image à l'échelle et de remplir la zone. Si le format ne correspond pas au 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'apparence d'un cercle, mais comme overflow est visible, le rognage n'a plus lieu.
img {
border-radius: 50% 50%;
overflow: visible;
}
Définir inherit: all et faire en sorte que toutes les propriétés en héritent, y compris overflow.
img {
all: inherit;
}
Solution
Si cette modification entraîne un dépassement indésirable et que le remplacement de la propriété "overflow" par "visible" n'est pas intentionnel, inspectez le code 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 par visible, et de la supprimer ou de la mettre à jour vers clip.
img {
overflow: clip;
}
Si la mise à jour du CSS n'est pas simple, une autre solution consiste à ajouter le style intégré suivant à l'élément.
<img style="overflow:clip !important">