Chrome 108 中的几个变化

“CSS 中替换元素的溢出更改”:

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

这意味着以前被剪裁到其内容框的图像现在可以根据样式表中的指定在这些边界之外绘制。

因此，任何以前默认情况下会溢出的图像、视频和画布元素在 Chrome 108 发布时可能会被剪裁。 注意，这可能会影响您现有工作的情况

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

值得阅读完整的文章以获取代码示例，但解决不需要剪裁的方案是使用 overflow: visible 覆盖 UA 的默认 overflow: clip

img {
  overflow: visible;
}

---

“准备在 Android 上的 Chrome 中即将出现的视窗大小调整行为更改”:

在 11 月，随着 Chrome 108 的发布，Chrome 将对屏幕键盘 (OSK) 显示时布局视窗的行为进行一些更改。 随着此更改，Android 上的 Chrome 将不再调整布局视窗的大小，而是仅调整视觉视窗的大小。 这将使 Android 上的 Chrome 的行为与 iOS 上的 Chrome 和 iOS 上的 Safari 保持一致。

这是一个与在移动触摸设备上使用视窗单位和固定定位的常见问题相关的更改。 我们多年来一直在解决（并尝试解决）这个问题

• “使用视窗单位时需要了解的一些事项”（Chris Coyier）
• “移动设备上视窗单位的技巧”（Louis Hoebregts）
• “大型、小型和动态视窗”（Chris Coyier）
• “移动 WebKit 中 100vh 的 CSS 修复”（Chris Coyier）

更改意味着 Android 上的 Chrome 在显示屏幕键盘时不再调整布局视窗的大小。 因此，视窗单位的计算值将不再在设备的键盘显示时缩小。 同样适用于旨在占用整个视窗且不再缩小以适应键盘的元素。 并且固定定位元素不再会在键盘弹出时出现在未知位置。

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

如果您希望元素在发生这种情况时保持可见，则值得查看 Chris 很久以前分享的解决方案，它使用带前缀的 webkit-fill-available 属性

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

这将使用视窗中的可用空间，而不是 UI 覆盖的空间……但 Chrome 目前忽略了该属性，我敢肯定，它不太可能在 108 版本中开始支持它。 不过，这可能是一个无关紧要的问题，因为 Chrome 108 还引入了对小型、大型和动态视窗单位的支持，这些单位已经在 Safari 和 Firefox 中得到支持。