Chrome中使用object-fit: cover时竖图出现锯齿的原因探究

我使用object-fit: cover属性在正方形容器内展示图片以保留原有比例，但发现Chrome浏览器中，当图片高度大于宽度时会出现锯齿，Firefox则无此问题。尝试过用translateZ等方式强制GPU渲染，效果不稳定。

问题截图 #

Chrome（占位图）

Firefox（占位图）

Chrome（示例图）

Firefox（示例图）

测试环境 #

• Chrome v103.0.5060.114
• Firefox v102.0
• Fedora 35

示例代码 #

CSS #

.box {
  width: 10em;
  height: 10em;
}

.cover {
  object-fit: cover;
}

HTML #

<div>
  <img class="box" src="https://dummyimage.com/640x640/000/fff" />
  <img class="box" src="https://dummyimage.com/640x320/000/fff" />
  <img class="box" src="https://dummyimage.com/800x1000/000/fff" />
</div>
<div>
  <img class="box cover" src="https://dummyimage.com/640x640/000/fff" />
  <img class="box cover" src="https://dummyimage.com/640x320/000/fff" />
  <img class="box cover" src="https://dummyimage.com/800x1000/000/fff" />
</div>

问题原因 #

这个问题属于Chrome与Firefox在object-fit: cover场景下的图像渲染差异，核心原因如下：

1. 缩放算法差异：Firefox默认采用的图像重采样算法（如双线性插值）在处理纵向裁剪的图片时，能更好地平滑边缘；而Chrome在图片高度远大于宽度且被裁剪到正方形容器的场景下，可能使用了更低质量的缩放算法，导致边缘出现锯齿。
2. GPU渲染管线逻辑不同：强制GPU渲染的方式效果不稳定，是因为Chrome的GPU渲染管线在处理object-fit的图像裁剪缩放时，没有自动启用抗锯齿优化，或存在纹理采样精度问题；而Firefox的GPU渲染流程对这类场景做了针对性优化，保障了渲染质量。
3. 版本特定Bug：你使用的Chrome v103属于较旧版本，这类object-fit场景下的渲染问题可能是该版本的已知Bug，后续Chrome更新中大概率已经修复了该问题。

内容的提问来源于stack exchange，提问作者Giacomo Ferretti