Een paar veranderingen komen in Chrome 108

“Een wijziging in overflow op vervangen elementen in CSS”:

Vanaf Chrome 108 respecteren de volgende vervangen elementen de overloopeigenschap: img, video en canvas. In eerdere versies van Chrome werd deze eigenschap voor deze elementen genegeerd.

Dit betekent dat een afbeelding die eerder in het inhoudsvak was geknipt, nu buiten die grenzen kan tekenen als dit in een stijlblad is opgegeven.

Dus afbeelding-, video- en canvaselementen die ooit zijn geknipt, kunnen de overloop weergeven wanneer Chrome 108 wordt verzonden. De genoemde situaties waarin dit van invloed kan zijn op uw bestaande werk:

• De object-fit eigenschap wordt gebruikt om de afbeelding te schalen en het vak te vullen. Als de beeldverhouding niet overeenkomt met het kader, wordt de afbeelding buiten de grenzen getekend.
• De border-radius eigenschap zorgt ervoor dat een vierkante afbeelding eruitziet als een cirkel, maar omdat overflow zichtbaar is, komt het knippen niet meer voor.
• omgeving inherit: all en ervoor zorgen dat alle eigenschappen erven, inclusief overflow.

De moeite waard om het volledige artikel te lezen voor codevoorbeelden, maar de oplossing voor ongewenste zichtbare overloop overschrijft de standaard van de UA overflow: visible Met overflow: clip:

img {
  overflow: clip;
}

"Bereid je voor op gedragsveranderingen voor het wijzigen van de grootte van de viewport die naar Chrome op Android komen":

In november, met de release van Chrome 108, zal Chrome enkele wijzigingen aanbrengen in hoe de Layout Viewport zich gedraagt ​​wanneer het schermtoetsenbord (OSK) wordt weergegeven. Met deze wijziging wijzigt Chrome op Android niet langer het formaat van de Layout Viewport, maar alleen de Visual Viewport. Dit brengt het gedrag van Chrome op Android op één lijn met dat van Chrome op iOS en Safari op iOS.

Dit is een verandering die verband houdt met de veelvoorkomende hoofdpijn van het werken met viewport-eenheden en vaste positionering op mobiele aanraakapparaten. We hebben het in de loop der jaren behandeld (en geprobeerd op te lossen):

De wijziging betekent dat Chrome op Android het formaat van de Layout Viewport niet langer aanpast wanneer het schermtoetsenbord wordt weergegeven. De berekende waarden van viewport-eenheden zullen dus niet langer krimpen wanneer het toetsenbord van een apparaat wordt weergegeven. Hetzelfde geldt voor elementen die zijn ontworpen om de volledige viewport in beslag te nemen en niet langer kleiner worden om plaats te bieden aan het toetsenbord. En niet langer zal een vaststaand element opwinden wie weet waar wanneer het toetsenbord opduikt.

Dit zorgt voor consistenter cross-browser gedrag dat online is met Chrome, Safari en Edge op iOS en iPadOS. Dat is geweldig, zelfs als het bijgewerkte gedrag niet ideaal is, omdat de gebruikersinterface van het toetsenbord nog steeds elementen kan verbergen en verbergen die in de weg staan.

Als je wilt dat elementen zichtbaar blijven wanneer dat gebeurt, is het de moeite waard om naar een oplossing die Chris lang geleden heeft gedeeld die het voorvoegsel . gebruikt webkit-fill-available eigendom:

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

Dat gebruikt de beschikbare ruimte in de viewport in plaats van wat wordt gedekt door de gebruikersinterface ... maar Chrome negeert momenteel de eigenschap, en ik durf te wedden dat het onwaarschijnlijk is dat het in de 108-release zal worden gerespecteerd. Dat kan echter een betwistbaar punt zijn, want Chrome 108 introduceert ook ondersteuning voor kleine, grote en dynamische viewport-eenheden, die al worden ondersteund in Safari en Firefox.