Chrome 108-s on tulemas paar muudatust

"CSS-i asendatud elementide ületäitumise muudatus":

Chrome 108-st järgivad järgmised asendatud elemendid ülevoolu omadust: img, video ja canvas. Chrome'i varasemates versioonides eirati seda atribuuti nende elementide puhul.

See tähendab, et pilt, mis oli varem selle sisukasti kärbitud, saab nüüd joonistada väljaspool neid piire, kui see on laadilehel määratud.

Seega võivad kunagi kärbitud pildi-, video- ja lõuendielemendid kuvada Chrome 108 tarnimisel ülevoolu. Märgitud olukorrad, kus see võib mõjutada teie olemasolevat tööd:

• . object-fit atribuuti kasutatakse pildi skaleerimiseks ja kasti täitmiseks. Kui kuvasuhe ei vasta kastile, joonistub pilt väljaspool piire.
• . border-radius omadus muudab ruudukujulise kujutise ringiks, kuid kuna overflow on nähtav, lõikamist enam ei toimu.
• Kehtestamine inherit: all ja põhjustab kõigi omaduste pärimise, sealhulgas overflow.

Koodinäidete jaoks tasub lugeda artiklit täismahus, kuid soovimatu nähtava ületäitumise lahendus alistab UA vaikeväärtuse overflow: visible koos overflow: clip:

img {
  overflow: clip;
}

„Valmistuge Androidi Chrome'i vaateava suuruse muutmise käitumise muudatusteks”:

Novembris, pärast Chrome 108 väljalaskmist, teeb Chrome mõned muudatused selles, kuidas paigutuse vaateport käitub ekraaniklaviatuuri (OSK) kuvamisel. Selle muudatusega ei muuda Chrome Androidis enam paigutuse vaateava, vaid muudab ainult visuaalset vaateava. See viib Chrome'i käitumise Androidis samaväärseks iOS-i Chrome'i ja iOS-i Safari käitumisega.

See on muudatus, mis on seotud mobiilsete puuteseadmete vaateava üksustega töötamise ja fikseeritud positsioneerimisega seotud levinud peavaludega. Oleme seda aastate jooksul käsitlenud (ja proovinud seda lahendada):

Muudatus tähendab, et Androidi Chrome ei muuda enam küljenduse vaateava suurust, kui kuvatakse ekraanil kuvatav klaviatuur. Seega ei vähene vaateava ühikute arvutatud väärtused enam seadme klaviatuuri kuvamisel. Sama kehtib ka elementide kohta, mis on loodud hõivama kogu vaateava, mis ei vähene enam klaviatuuri mahutamiseks. Ja enam ei kerki fikseeritud asendiga element, kes teab kuhu, klaviatuuri hüppamisel.

See toob kaasa järjekindlama brauseriülese käitumise, mis on kooskõlas Chrome'i, Safari ja Edge'iga iOS-is ja iPadOS-is. See on suurepärane, isegi kui värskendatud käitumine pole ideaalne, sest klaviatuuri kasutajaliides suudab siiski katta ja varjata selle teele sattuvaid elemente.

Kui eelistate, et elemendid jääksid sel juhul nähtavaks, tasub vaadata a lahendust jagas Chris tükk aega tagasi mis kasutab eesliidet webkit-fill-available Vara:

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

See kasutab pigem vaateaknas saadaolevat ruumi kui seda, mida kasutajaliides katab... kuid Chrome ignoreerib praegu seda omadust ja ma võin kihla vedada, et taskus on nikkel, et tõenäoliselt ei hakka see 108 versioonis seda austama. See võib aga olla vaieldav küsimus, nagu Chrome 108 tutvustab ka väikeste, suurte ja dünaamiliste vaateakna üksuste tugi, mida Safari ja Firefox juba toetavad.