Pár változás érkezik a Chrome 108-ban

„A CSS-ben lecserélt elemek túlcsordulása megváltozott”:

A Chrome 108-ból a következő lecserélt elemek tiszteletben tartják a túlcsordulási tulajdonságot: img, video és a canvas. A Chrome korábbi verzióiban ezt a tulajdonságot figyelmen kívül hagyták ezeken az elemeken.

Ez azt jelenti, hogy a korábban a tartalomdobozba vágott kép most már e határokon kívülre tud rajzolni, ha a stíluslap ezt megadja.

Így az egykor levágott kép-, videó- ​​és vászonelemek túlcsordulhatnak a Chrome 108 szállításakor. A megjelölt helyzetek, amikor ez hatással lehet a meglévő munkájára:

• A object-fit tulajdonság a kép méretezésére és a doboz kitöltésére szolgál. Ha a képarány nem egyezik a kerettel, a kép a határokon kívülre húzódik.
• A border-radius tulajdonság egy négyzet alakú képet körnek néz ki, de azért overflow látható, a vágás már nem történik meg.
• Beállítás inherit: all és minden tulajdonság öröklését okozza, beleértve overflow.

Érdemes elolvasni a teljes cikket kódpéldákért, de a nem kívánt látható túlcsordulás megoldása felülírja az UA alapértelmezett értékét. overflow: visible val vel overflow: clip:

img {
  overflow: clip;
}

„Készüljön fel a nézetablak átméretezési viselkedésének változásaira, amelyek az Android rendszeren futó Chrome-ban várhatók”:

Novemberben, a Chrome 108 megjelenésével a Chrome módosítani fog az elrendezés nézetablakának viselkedésében, amikor megjelenik a képernyő-billentyűzet (OSK). Ezzel a változtatással az Androidon futó Chrome többé nem fogja átméretezni az elrendezési nézetet, hanem csak a vizuális nézetet. Ezzel az Android rendszeren futó Chrome viselkedése az iOS rendszeren futó Chrome és az iOS rendszeren futó Safari viselkedésével egyenrangú lesz.

Ez a változás a nézetablak-egységekkel és a mobil érintőképernyős eszközökön történő rögzített pozicionálással kapcsolatos gyakori fejfájással kapcsolatos. Az évek során foglalkoztunk vele (és próbáltuk megoldani):

A változás azt jelenti, hogy a Chrome Android rendszeren a továbbiakban nem fogja átméretezni az elrendezési nézetet, amikor megjelenik a képernyő-billentyűzet. Így a nézetablak egységek számított értékei többé nem csökkennek, amikor az eszköz billentyűzete megjelenik. Ugyanez vonatkozik azokra az elemekre, amelyeket úgy terveztek, hogy elfoglalják a teljes nézetablakot, és már nem zsugorodnak a billentyűzethez. És többé nem fog egy fix pozíciójú elem feltörni, ki tudja, hová, amikor a billentyűzet felbukkan.

Ez konzisztensebb böngészők közötti viselkedést biztosít, amely összhangban van a Chrome-mal, a Safarival és az Edge-vel iOS és iPadOS rendszeren. Ez nagyszerű, még akkor is, ha a frissített viselkedés kevésbé ideális, mert a billentyűzet felhasználói felülete továbbra is képes lefedni és eltakarni az útjába kerülő elemeket.

Ha azt szeretné, ha az elemek láthatóak maradnának, amikor ez megtörténik, érdemes megnézni a megoldást Chris megosztotta régen amely az előtagot használja webkit-fill-available ingatlan:

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

Ez a kezelőfelület által lefedett helyett a nézetablakban rendelkezésre álló helyet használja ki… de a Chrome jelenleg figyelmen kívül hagyja ezt a tulajdonságot, és le mernék fogadni, hogy a nikkel a zsebemben nem valószínű, hogy a 108-as kiadásban elkezdi tiszteletben tartani. Ez azonban vitás kérdés lehet, mint A Chrome 108 is bemutatkozik kis, nagy és dinamikus nézetablak egységek támogatása, amelyeket a Safari és a Firefox már támogat.