Chrome 108的几个更改

Chrome 108即将推出的两项重要更改：CSS溢出属性和Android视口调整行为

CSS替换元素的溢出属性更改：

从Chrome 108开始，以下替换元素将遵循overflow属性：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）显示时布局视口（Layout Viewport）的行为进行一些更改。通过此更改，Android版Chrome将不再调整布局视口大小，而只调整视觉视口（Visual Viewport）大小。这将使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属性：

img {
  overflow: visible;
}

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

此浏览器支持数据来自Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面版

移动/平板电脑

以上是Chrome 108的几个更改的详细内容。更多信息请关注PHP中文网其他相关文章！