CSS background-size导致Chrome和Safari商品图顶部出现细黑线如何解决

该问题本质是不同浏览器内核的亚像素渲染精度差异导致：当容器尺寸计算出现小数像素时，背景图缩放后无法完全覆盖容器，露出的容器底层背景色就会呈现为细黑线，Chromium和WebKit内核的background-size计算逻辑不同，因此会出现修改属性值后仅单浏览器生效的情况。

可按优先级选择以下修复方案：

• 最低成本兜底方案：给承载背景图的容器设置与商品图主色调一致的背景色，例如商品图多为白底时直接添加background-color: #fff;，即使出现渲染缝隙也不会露出异常颜色，全浏览器兼容。
• 直接修复渲染缝隙：将background-size属性值调整为background-size: 100.1%;，轻微放大背景图覆盖亚像素偏差导致的缝隙，不会影响商品图的正常显示效果，可同时适配Chrome与Safari。
• 渲染模式优化：给容器添加transform: translateZ(0);属性触发GPU渲染，可修正Safari下部分亚像素计算偏差问题，可和上述方案搭配使用。
• 长期兼容优化：如果业务允许，可将背景图展示改为<img>标签搭配object-fit: cover;属性实现，图片标签的跨浏览器渲染一致性远高于div背景图，从根源上避免此类问题出现。

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