Un avviso avanzato relativo a una modifica al comportamento del CSS che potrebbe causare un overflow indesiderato.
A partire da Chrome 108, i seguenti elementi sostituiti rispettano la proprietà di overflow: img, video e canvas. Nelle versioni precedenti di Chrome, questa proprietà veniva ignorata in questi elementi.
Ciò significa che un'immagine precedentemente ritagliata nella sua casella di contenuto ora può tracciare al di fuori di tali limiti se questa operazione è stata specificata in un foglio di stile. Il foglio di stile del browser predefinito consente di limitare l'overflow alla casella dei contenuti con le seguenti regole:
img {
overflow: clip;
overflow-clip-margin: content-box;
}
Tuttavia, il foglio di stile può sostituire 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 scalare l'immagine e riempire la casella. Se le proporzioni non corrispondono al riquadro, l'immagine verrà disegnata al di fuori dei limiti.
img {
object-fit: cover;
overflow: visible;
}
La proprietà border-radius rende un'immagine quadrata simile a un cerchio, ma dato che overflow è visibile, il ritaglio non avviene più.
img {
border-radius: 50% 50%;
overflow: visible;
}
Impostazione di inherit: all e conseguente ereditarietà di tutte le proprietà, tra cui overflow.
img {
all: inherit;
}
Soluzione
Se questa modifica comporta la visualizzazione di un overflow indesiderato e l'override della proprietà overflow in visibile 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 in visible e rimuoverla o aggiornarla in clip.
img {
overflow: clip;
}
Se l'aggiornamento del CSS non è banale, un'altra correzione consiste nell'aggiungere il seguente stile incorporato all'elemento.
<img style="overflow:clip !important">