A Couple Adjustments Coming in Chrome 108 | CSS-Tips

“A change to overflow on changed components in CSS”:

From Chrome 108, the next changed components respect the overflow property: img, video and canvas. In earlier variations of Chrome, this property was ignored on these components.

Because of this a picture which was earlier clipped to its content material field can now draw exterior these bounds if specified to take action in a mode sheet.

So, picture, video, and canvas components that have been as soon as clipped would possibly show the overflow when Chrome 108 ships. The famous conditions the place this would possibly have an effect on your current work:

• The object-fit property is used to scale the picture and fill the field. If the facet ratio doesn’t match the field, the picture will draw exterior of the bounds.
• The border-radius property makes a sq. picture appear like a circle, however as a result of overflow is visble the clipping now not happens.
• Setting inherit: all and inflicting all properties to inherit, together with overflow.

Price studying the total article for code examples, however the resolution for undesirable seen overflow is overriding the UA’s default overflow: seen with overflow: clip:

img {
  overflow: clip;
}

“Put together for viewport resize habits adjustments coming to Chrome on Android”:

In November, with the discharge of Chrome 108, Chrome will make some adjustments to how the Structure Viewport behaves when the on-screen keyboard (OSK) will get proven. With this transformation, Chrome on Android will now not resize the Structure Viewport, and as a substitute resize solely the Visible Viewport. This can deliver Chrome on Android’s habits as much as par with that of Chrome on iOS and Safari on iOS.

This can be a change associated to the frequent complications of working with viewport items and glued positioning on cellular contact units. We’ve lined (and tried fixing) it through the years:

The change signifies that Chrome on Android will now not resize the Structure Viewport when the on-screen keyboard is proven. So, the computed values of viewport items will now not shrink when a tool’s keyboard is displayed. Similar goes for components which can be designed to take up the total viewport now not shrinking to accomodate the keyboard. And now not will a fixed-position factor wind up who is aware of the place when the keyboard pops up.

This brings extra constant cross-browser habits that’s on line with Chrome, Safari, and Edge on iOS and iPadOS. That’s nice, even when the up to date habits is lower than superb as a result of the keyboard UI can nonetheless cowl and obscure components that get in its approach.

When you want components to stay seen when that occurs, it’s value a resolution Chris shared a protracted whereas again that makes use of the prefixed webkit-fill-available property:

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

That makes use of the obtainable area within the viewport reasonably than what’s lined by the UI… however Chrome at the moment ignores the property, and I’d guess the nickel in my pocket that it’s unlikely to start out respecting it within the 108 launch. That could be a moot level, although, as Chrome 108 additionally introduces help for small, massive, and dynamic viewport items, that are already supported in Safari and Firefox.