A Couple Changes Coming in Chrome 108

Two important changes to Chrome 108 are coming: CSS overflow properties and Android viewport adjustment behavior

CSS replacement element's overflow attribute changes:

Starting with Chrome 108, the following replacement elements will follow the overflow attributes: img, video, and canvas. In earlier versions of Chrome, this property was ignored.

This means that the image that was previously cropped to the content box, now can be drawn outside the boundary if specified in the style sheet.

Therefore, any previously default overflowed image, video, and canvas elements may be cropped after Chrome 108 release. The following situations need to be paid attention to:

• Use the object-fit attribute to zoom in and fill in the box. If the aspect ratio does not match the box, the image will be drawn outside the boundary.
The
• border-radius property makes the square image look like a circle, but since overflow is visible, the cropping no longer occurs.
• Set inherit: all, resulting in inheritance of all attributes, including overflow.

It is recommended to read the full article for code examples, but for unwanted cropping, the solution is to override the default of UA with overflow: visible: overflow: clip

img {
  overflow: visible;
}

Check viewport adjustment behavior change for Android:

In November, with the release of Chrome 108, Chrome will make some changes to the behavior of the Layout Viewport when the on-screen keyboard (OSK) is displayed. With this change, Chrome for Android will no longer resize the layout viewport, but will only resize the Visual Viewport. This will keep Chrome on Android behavior consistent with Chrome for iOS and Safari for iOS.

This is a change related to the common puzzles of using viewport units and fixed positioning on mobile touch devices. We've discussed (and tried to solve) this problem over the years:

"Some things to note when using viewport units" (Chris Coyier)
"Louis Hoebregts" (Louis Hoebregts)
"Large, Small and Dynamic Viewports" (Chris Coyier)
"Chris Coyier" (Chris Coyier)

This change means that when the on-screen keyboard is displayed, Chrome for Android will no longer resize the layout viewport. Therefore, when the device's keyboard displays, the calculated value of the viewport unit will no longer be reduced. Similarly, elements designed to occupy the entire viewport will no longer be reduced to fit the keyboard. Elements in fixed positions will no longer appear in unknown locations because the keyboard pops up.

This brings more consistent cross-browser behavior, consistent with Chrome, Safari, and Edge on iOS and iPadOS. This is good, even if the updated behavior is not ideal, as the keyboard UI can still overwrite and obstruct elements of the path.

If you want the elements to remain visible when this happens, it is worth considering a solution shared by Chris a long time ago using the prefix webkit-fill-available attribute:

img {
  overflow: visible;
}

This uses the space available in the viewport, not the part covered by the UI...but Chrome currently ignores this property, and I'm sure it's unlikely that it will start supporting it in version 108. This may be an irrelevant issue, though, as Chrome 108 also introduces support for small, large, and dynamic viewport units that are already supported in Safari and Firefox.

This browser supports data from Caniuse, which contains more details. The number indicates that the browser supports this feature in this version and later.

Desktop version

Mobile/Tablet PC

The above is the detailed content of A Couple Changes Coming in Chrome 108. For more information, please follow other related articles on the PHP Chinese website!