Pari muutosta tulossa Chrome 108:ssa

"Muutos korvattujen elementtien ylivuotoon CSS:ssä":

Chrome 108:sta seuraavat korvatut elementit noudattavat ylivuotoominaisuutta: img, video ja canvas. Chromen aiemmissa versioissa tämä ominaisuus jätettiin huomiotta näissä elementeissä.

Tämä tarkoittaa, että aiemmin sisältölaatikkoonsa leikattu kuva voi nyt piirtää näiden rajojen ulkopuolelle, jos niin on määritetty tyylisivulla.

Joten kerran leikatut kuva-, video- ja kanvaselementit saattavat näyttää ylivuotoa, kun Chrome 108 toimitetaan. Mainitut tilanteet, joissa tämä saattaa vaikuttaa olemassa olevaan työhön:

• - object-fit ominaisuutta käytetään kuvan skaalaamiseen ja laatikon täyttämiseen. Jos kuvasuhde ei vastaa ruutua, kuva piirtyy rajojen ulkopuolelle.
• - border-radius ominaisuus saa neliön kuvan näyttämään ympyrältä, mutta koska overflow on näkyvissä, leikkausta ei enää tapahdu.
• Asetus inherit: all ja saa kaikki omaisuudet periytymään, mukaan lukien overflow.

Kannattaa lukea koko artikkeli koodiesimerkkejä varten, mutta ei-toivotun näkyvän ylivuodon ratkaisu ohittaa UA:n oletusarvon. overflow: visible with overflow: clip:

img {
  overflow: clip;
}

"Valmistaudu näkymän koon muuttamiseen Androidin Chromeen":

Marraskuussa Chrome 108:n julkaisun myötä Chrome tekee joitain muutoksia siihen, miten Layout Viewport käyttäytyy, kun näyttönäppäimistö (OSK) tulee näkyviin. Tämän muutoksen myötä Chrome Androidissa ei enää muuta asettelunäkymän kokoa, vaan muuttaa vain visuaalisen näkymän kokoa. Tämä nostaa Androidin Chromen toiminnan tasolle iOS:n Chromen ja iOS:n Safarin kanssa.

Tämä muutos liittyy yleisiin päänsärkyihin, joita aiheutuu katseluikkunayksiköiden kanssa työskentelystä ja kiinteästä sijainnista mobiilikosketuslaitteissa. Olemme käsitelleet (ja yrittäneet ratkaista) sen vuosien varrella:

Muutos tarkoittaa, että Chrome Androidilla ei enää muuta asettelunäkymän kokoa, kun näyttönäppäimistö näytetään. Joten näyttöikkunan yksiköiden lasketut arvot eivät enää kutistu, kun laitteen näppäimistö näytetään. Sama koskee elementtejä, jotka on suunniteltu ottamaan koko kuvaportin, eivätkä ne enää kutistu näppäimistön mukaan. Eikä enää kiinteä asentoelementti pääty kuka tietää minne, kun näppäimistö ponnahtaa esiin.

Tämä tuo johdonmukaisemman selainkäytön, joka on linjassa Chromen, Safarin ja Edgen kanssa iOS- ja iPadOS-laitteissa. Se on hienoa, vaikka päivitetty toiminta ei olisikaan ihanteellista, koska näppäimistön käyttöliittymä voi silti peittää ja peittää sen tielle jäävät elementit.

Jos haluat, että elementit pysyvät näkyvissä, kun niin tapahtuu, kannattaa katsoa a ratkaisu Chris jakoi kauan sitten joka käyttää etuliitettä webkit-fill-available omaisuus:

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

Se käyttää näkymän käytettävissä olevaa tilaa käyttöliittymän kattaman sijaan… mutta Chrome jättää tällä hetkellä ominaisuuden huomioimatta, ja lyön vetoa taskussani olevan nikkelin kanssa, että se ei todennäköisesti alkaisi kunnioittaa sitä 108-julkaisussa. Se voi kuitenkin olla kiistanalainen asia, kuten Chrome 108 esittelee myös tuki pienille, suurille ja dynaamisille näkymäyksiköille, joita tuetaan jo Safarissa ja Firefoxissa.