V Chromu 108 prihaja nekaj sprememb

»Sprememba prelivanja na zamenjanih elementih v CSS«:

Iz Chroma 108 naslednji zamenjani elementi upoštevajo lastnost overflow: img, video in canvas. V prejšnjih različicah Chroma je bila ta lastnost pri teh elementih prezrta.

To pomeni, da lahko slika, ki je bila prej prirezana na polje z vsebino, zdaj nariše zunaj teh meja, če je to določeno v slogovnem listu.

Tako se lahko pri elementih slike, videoposnetka in platna, ki so bili nekoč odrezani, prikaže prelivanje, ko bo Chrome 108 odposlan. Omenjene situacije, v katerih bi to lahko vplivalo na vaše obstoječe delo:

• O object-fit Lastnost se uporablja za spreminjanje velikosti slike in zapolnjevanje polja. Če se razmerje stranic ne ujema s poljem, bo slika narisana izven meja.
• O border-radius lastnost naredi kvadratno sliko videti kot krog, ampak ker overflow je viden, se izrezovanje ne pojavi več.
• Nastavitev inherit: all in povzročanje dedovanja vseh lastnosti, vključno z overflow.

Vredno je prebrati celoten članek za primere kode, vendar je rešitev za neželeno vidno prelivanje preglasitev privzete vrednosti UA overflow: visible z overflow: clip:

img {
  overflow: clip;
}

»Pripravite se na spremembe vedenja spreminjanja velikosti vidnega polja, ki prihajajo v Chrome v sistemu Android«:

Novembra, z izdajo Chroma 108, bo Chrome naredil nekaj sprememb glede obnašanja prikaza postavitve, ko se prikaže zaslonska tipkovnica (OSK). S to spremembo Chrome v sistemu Android ne bo več spreminjal velikosti vidnega polja postavitve, temveč bo spremenil velikost samo vizualnega vidnega polja. To bo vedenje Chroma v Androidu izenačilo s Chromom v iOS in Safari v iOS.

To je sprememba, povezana s pogostimi glavoboli pri delu z enotami vidnega polja in fiksnim pozicioniranjem na mobilnih napravah na dotik. V preteklih letih smo to obravnavali (in poskušali rešiti):

Sprememba pomeni, da Chrome v Androidu ne bo več spreminjal velikosti pogleda postavitve, ko je prikazana zaslonska tipkovnica. Tako se izračunane vrednosti enot vidnega polja ne bodo več skrčile, ko je prikazana tipkovnica naprave. Enako velja za elemente, ki so zasnovani tako, da zavzamejo celotno vidno okno in se ne krčijo več za namestitev tipkovnice. In ne bo več element s fiksnim položajem, kdo ve kam, ko se pojavi tipkovnica.

To prinaša bolj dosledno vedenje med brskalniki, ki je usklajeno s Chromom, Safarijem in Edgeom v sistemih iOS in iPadOS. To je super, tudi če posodobljeno vedenje ni idealno, saj lahko uporabniški vmesnik tipkovnice še vedno prekrije in zakrije elemente, ki so mu na poti.

Če želite, da elementi ostanejo vidni, ko se to zgodi, je vredno pogledati a rešitev Chris delil dolgo nazaj ki uporablja predpono webkit-fill-available lastnost:

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

To uporablja razpoložljivi prostor v vidnem polju in ne tistega, kar pokriva uporabniški vmesnik ... vendar Chrome trenutno ignorira lastnost, in stavil bi za drobiž, da je malo verjetno, da jo bo začel spoštovati v izdaji 108. Čeprav je to morda sporna točka, saj Predstavlja tudi Chrome 108 podpora za majhne, ​​velike in dinamične pogledne enote, ki so že podprte v Safariju in Firefoxu.