Un avviso avanzato relativo a una modifica al comportamento del CSS che potrebbe causare overflow indesiderato.
A partire dalla versione 108 di Chrome, i seguenti elementi sostituiti rispettano la proprietà overflow: img, video e canvas. Nelle versioni precedenti di Chrome, questa proprietà veniva ignorata per questi elementi.
Ciò significa che un'immagine precedentemente ritagliata nella casella dei contenuti può ora disegnare al di fuori di questi limiti se specificato in un foglio di stile. Il foglio di stile del browser predefinito adatta l'overflow alla casella dei contenuti con le seguenti regole:
img {
overflow: clip;
overflow-clip-margin: content-box;
}
Tuttavia, il tuo foglio di stile può ignorare questo comportamento impostando overflow: visible. I seguenti esempi mostrano alcuni casi in cui ora potresti notare un overflow indesiderato.
La proprietà object-fit viene utilizzata per ridimensionare l'immagine e riempire il riquadro. Se le proporzioni non corrispondono al riquadro, l'immagine verrà disegnata al di fuori dei margini.
img {
object-fit: cover;
overflow: visible;
}
La proprietà border-radius fa sembrare un'immagine quadrata un cerchio, ma poiché overflow è visibile, il ritaglio non si verifica più.
img {
border-radius: 50% 50%;
overflow: visible;
}
Impostazione di inherit: all e impostazione dell'ereditarietà di tutte le proprietà, tra cui overflow.
img {
all: inherit;
}
Soluzione
Se questa modifica comporta un overflow indesiderato e l'override della proprietà overflow su visible non è intenzionale, controlla il CSS applicato all'elemento tramite DevTools. Questo dovrebbe consentirti di identificare la dichiarazione CSS che esegue l'override della proprietà overflow a visible e rimuoverla o aggiornarla a clip.
img {
overflow: clip;
}
Se l'aggiornamento del CSS non è banale, un'altra soluzione è l'aggiunta del seguente stile incorporato all'elemento.
<img style="overflow:clip !important">