Chrome浏览器下图片边缘出现白像素线问题求助

嘿，这个Chrome特有的白边问题我之前也踩过坑，大概率是Chrome在处理小数像素渲染、CSS变换或者图片缩放时的精度bug导致的，给你几个针对性的解决方案，按优先级试试：

• 给图片容器添加裁剪或负边距
  给你的slideshow图片容器加上overflow: hidden;，或者直接给图片设置margin-right: -1px;，这样能直接把那条溢出的白边裁切掉，几乎不会影响正常布局。

• 优化transform动画的精度
  如果你的slideshow是用transform: translateX()实现切换的，Chrome在计算小数像素偏移时容易出现边缘白边。可以试试：

  • 把动画的目标位置调整为整数像素值，避免小数偏移；
  • 给图片添加transform: translateZ(0);开启硬件加速，强制Chrome用GPU渲染，提升精度。

• 确保图片和容器的尺寸是整数像素
  检查你的slideshow容器宽度是否为整数像素，非整数尺寸会导致图片被缩放成小数比例，Chrome对这种情况的渲染容易出问题。同时给图片设置object-fit: cover;，让图片完全覆盖容器，避免拉伸或留白带来的渲染异常。

• 用透明边框/阴影“填充”白边
  这是个应急小技巧：给图片添加border-right: 1px solid transparent;或者box-shadow: 0 0 0 1px transparent;，视觉上不会有变化，但能填补那条白边的位置，解决渲染漏洞。

另外提一句，你用的Chrome 64.0版本确实比较老旧了，新版本Chrome已经修复了不少这类渲染bug，如果允许升级浏览器的话，也可以先试试升级看问题是否消失。

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