为何overflow容器中transform:translate(0,-1px)导致img的loading="lazy"失效？

在overflow:hidden的容器中，通过transform:translate(0,-1px)和verticalAlign:top调整图片位置（避免显示超出边界的部分，以此展示更大的图片区域），但设置了loading='lazy'的图片在滚动时并未自动加载，甚至没有发起请求。经测试，overflow:hidden、verticalAlign:'top'、transform:'translate(0,-1px)'、loading='lazy'这几个属性组合会触发该问题。

复现代码：

<div style={{
    overflow:'hidden',
}}>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" style={{
        verticalAlign: 'top',
        transform:'translate(0,-1px)',
    }} loading='lazy' alt="" />
</div>

浏览器懒加载的触发逻辑依赖于元素的布局位置与视口的交集计算。当图片同时应用transform位移和verticalAlign:top，且父容器设置overflow:hidden时，浏览器对图片的可见区域判定出现偏差，错误认为图片始终处于视口外，因此不会触发加载请求。

可以通过替换存在冲突的属性来修复：

• 用margin-top: -1px替代transform:translate(0,-1px)，这种方式属于常规布局调整，浏览器能正确计算图片的位置，不会干扰懒加载逻辑：

<div style={{
    overflow:'hidden',
}}>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" style={{
        verticalAlign: 'top',
        marginTop: '-1px',
    }} loading='lazy' alt="" />
</div>

• 若必须保留transform，可尝试移除verticalAlign:top，重新验证图片显示效果是否符合需求，这种调整也能让懒加载恢复正常。

内容的提问来源于stack exchange，提问作者YinPeng.Wei