Un paio di modifiche in arrivo in Chrome 108

"Una modifica per l'overflow sugli elementi sostituiti nei CSS":

Da Chrome 108, i seguenti elementi sostituiti rispettano la proprietà di overflow: img, video ed canvas. Nelle versioni precedenti di Chrome, questa proprietà veniva ignorata su questi elementi.

Ciò significa che un'immagine che era stata precedentemente ritagliata nella sua casella di contenuto ora può disegnare al di fuori di quei limiti se specificato in un foglio di stile.

Pertanto, gli elementi di immagine, video e tela che una volta erano stati ritagliati potrebbero visualizzare l'overflow quando Chrome 108 viene spedito. Le situazioni segnalate in cui ciò potrebbe influire sul tuo lavoro esistente:

• I 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 limiti.
• I border-radius la proprietà fa sembrare un'immagine quadrata un cerchio, ma perché overflow è visibile il clipping non si verifica più.
• Configurazione inherit: all e facendo ereditare tutte le proprietà, incluso overflow.

Vale la pena leggere l'articolo completo per esempi di codice, ma la soluzione per l'overflow visibile indesiderato sta sovrascrivendo l'impostazione predefinita dell'UA overflow: visible con overflow: clip:

img {
  overflow: clip;
}

"Prepararsi per le modifiche al comportamento di ridimensionamento del viewport in arrivo su Chrome su Android":

A novembre, con il rilascio di Chrome 108, Chrome apporterà alcune modifiche al comportamento di Layout Viewport quando viene mostrata la tastiera su schermo (OSK). Con questa modifica, Chrome su Android non ridimensionerà più la visualizzazione layout e ridimensionerà invece solo la visualizzazione visiva. Ciò porterà il comportamento di Chrome su Android alla pari con quello di Chrome su iOS e Safari su iOS.

Si tratta di un cambiamento correlato ai mal di testa comuni legati al lavoro con le unità viewport e al posizionamento fisso sui dispositivi touch mobili. L'abbiamo trattato (e provato a risolverlo) nel corso degli anni:

La modifica significa che Chrome su Android non ridimensionerà più la visualizzazione layout quando viene mostrata la tastiera su schermo. Pertanto, i valori calcolati delle unità di visualizzazione non si ridurranno più quando viene visualizzata la tastiera di un dispositivo. Lo stesso vale per gli elementi progettati per occupare l'intera vista non più restringendosi per accogliere la tastiera. E non finirà più un elemento a posizione fissa chissà dove quando si apre la tastiera.

Ciò porta un comportamento cross-browser più coerente che è in linea con Chrome, Safari ed Edge su iOS e iPadOS. È fantastico, anche se il comportamento aggiornato è tutt'altro che ideale perché l'interfaccia utente della tastiera può ancora coprire e oscurare gli elementi che si frappongono.

Se preferisci che gli elementi rimangano visibili quando ciò accade, vale la pena guardare a soluzione che Chris ha condiviso molto tempo fa che utilizza il prefisso webkit-fill-available proprietà:

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

Ciò utilizza lo spazio disponibile nel viewport piuttosto che ciò che è coperto dall'interfaccia utente... ma Chrome attualmente ignora la proprietà e scommetto il nichel che ho in tasca che è improbabile che inizi a rispettarlo nella versione 108. Potrebbe essere un punto controverso, però, come Presenta anche Chrome 108 supporto per unità di visualizzazione piccole, grandi e dinamiche, che sono già supportate in Safari e Firefox.