Chrome 108 中的一些变化

“CSS 中替换元素溢出的变化”:

从 Chrome 108 开始，以下替换元素尊重溢出属性： img, video 和 canvas. 在早期版本的 Chrome 中，这些元素上的此属性被忽略。

这意味着，如果在样式表中指定这样做，那么之前剪裁到其内容框的图像现在可以在这些边界之外绘制。

因此，曾经剪辑过的图像、视频和画布元素可能会在 Chrome 108 发布时显示溢出。 可能会影响您现有工作的上述情况：

•  object-fit 属性用于缩放图像并填充框。 如果纵横比与框不匹配，则图像将绘制在边界之外。
•  border-radius 属性使正方形图像看起来像一个圆形，但是因为 overflow 可见剪裁不再发生。
• 设置 inherit: all 并导致所有属性继承，包括 overflow.

值得阅读完整的代码示例文章，但不需要的可见溢出的解决方案是覆盖 UA 的默认值 overflow: visible overflow: clip:

img {
  overflow: clip;
}

“为 Android 版 Chrome 中的视口调整大小行为变化做准备”:

108 月，随着 Chrome XNUMX 的发布，Chrome 将对显示屏幕键盘 (OSK) 时布局视口的行为方式进行一些更改。 通过此更改，Android 上的 Chrome 将不再调整布局视口的大小，而是仅调整视觉视口的大小。 这将使 Android 上的 Chrome 的行为与 iOS 上的 Chrome 和 iOS 上的 Safari 不相上下。

这是一个与在移动触摸设备上使用视口单元和固定定位相关的常见问题的变化。 多年来，我们已经涵盖（并尝试解决）它：

此更改意味着 Android 上的 Chrome 在显示屏幕键盘时将不再调整布局视口的大小。 因此，当显示设备的键盘时，视口单位的计算值将不再缩小。 设计为占据整个视口而不再缩小以适应键盘的元素也是如此。 并且不再会出现一个固定位置的元素，谁知道键盘何时弹出。

这带来了更一致的跨浏览器行为，与 iOS 和 iPadOS 上的 Chrome、Safari 和 Edge 保持一致。 这很好，即使更新后的行为不太理想，因为键盘 UI 仍然可以覆盖和遮盖阻碍它的元素。

如果您希望元素在发生这种情况时保持可见，那么值得一看 解决方案克里斯分享了很长时间 使用前缀的 webkit-fill-available 属性：

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

这使用了视口中的可用空间，而不是 UI 覆盖的空间……但 Chrome 目前忽略了该属性，我敢打赌，在 108 版本中不太可能开始尊重它。 不过，这可能是一个有争议的问题，因为 Chrome 108 还引入了 支持小型、大型和动态视口单元，Safari 和 Firefox 已经支持这些单元。