Câteva modificări care vin în Chrome 108

„O modificare a depășirii elementelor înlocuite în CSS”:

Din Chrome 108, următoarele elemente înlocuite respectă proprietatea de overflow: img, video și canvas. În versiunile anterioare de Chrome, această proprietate a fost ignorată pentru aceste elemente.

Aceasta înseamnă că o imagine care a fost tăiată mai devreme în caseta de conținut poate desena acum în afara acestor limite dacă este specificat să facă acest lucru într-o foaie de stil.

Deci, elementele de imagine, video și pânză care au fost tăiate cândva ar putea afișa depășirea atunci când Chrome 108 este livrat. Situațiile remarcate în care acest lucru vă poate afecta munca existentă:

•  object-fit proprietatea este utilizată pentru a scala imaginea și pentru a umple caseta. Dacă raportul de aspect nu se potrivește cu caseta, imaginea va desena în afara limitelor.
•  border-radius proprietate face ca o imagine pătrată să arate ca un cerc, dar pentru că overflow este vizibil decuparea nu mai are loc.
• reglaj inherit: all și determinând moștenirea tuturor proprietăților, inclusiv overflow.

Merită să citiți articolul complet pentru exemple de cod, dar soluția pentru depășirea vizibilă nedorită anulează valoarea implicită a UA overflow: visible cu overflow: clip:

img {
  overflow: clip;
}

„Pregătiți-vă pentru modificările comportamentului de redimensionare a ferestrei de vizualizare care vin în Chrome pe Android”:

În noiembrie, odată cu lansarea Chrome 108, Chrome va aduce câteva modificări la modul în care se comportă Layout Viewport când este afișată tastatura de pe ecran (OSK). Odată cu această modificare, Chrome pe Android nu va mai redimensiona fereastra Layout Viewport, ci în schimb va redimensiona doar Vizualizare vizuală. Acest lucru va aduce Chrome pe Android la egalitate cu cel al Chrome pe iOS și Safari pe iOS.

Aceasta este o schimbare legată de durerile de cap obișnuite ale lucrului cu unități de vizualizare și poziționare fixă ​​pe dispozitivele mobile tactile. Am acoperit (și am încercat să o rezolvăm) de-a lungul anilor:

Schimbarea înseamnă că Chrome pe Android nu va mai redimensiona fereastra de vizualizare a aspectului când este afișată tastatura de pe ecran. Deci, valorile calculate ale unităților de vizualizare nu se vor mai micșora atunci când este afișată tastatura unui dispozitiv. Același lucru este valabil și pentru elementele care sunt proiectate să ocupe întreaga fereastră de vizualizare, care nu se mai micșorează pentru a acomoda tastatura. Și nu se va mai închide un element cu poziție fixă ​​cine știe unde când apare tastatura.

Acest lucru aduce un comportament mai consistent între browsere, care este conectat cu Chrome, Safari și Edge pe iOS și iPadOS. Este grozav, chiar dacă comportamentul actualizat este mai puțin decât ideal, deoarece interfața de utilizare a tastaturii poate acoperi și ascunde elementele care îi ies în cale.

Dacă preferați ca elementele să rămână vizibile atunci când se întâmplă acest lucru, merită să vă uitați la a soluția pe care Chris a împărtășit-o cu mult timp în urmă care folosește prefixul webkit-fill-available proprietate:

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

Acesta folosește spațiul disponibil în fereastra de vizualizare, mai degrabă decât ceea ce este acoperit de interfața de utilizare... dar Chrome ignoră în prezent proprietatea și aș paria nichelul din buzunar că este puțin probabil să înceapă să o respecte în versiunea 108. Acesta poate fi un punct discutabil, totuși, ca Chrome 108 introduce și el suport pentru unități de vizualizare mici, mari și dinamice, care sunt deja acceptate în Safari și Firefox.