iPad设备横向图片滑块滚动结束后偶尔出现1px残留内容问题

问题现象 #

当我们向左/右滚动滑块时，底部滑块的右边缘偶尔会出现最后一张图片宽度为1px的部分，尽管滑块整体功能运行无异常，但缓慢滚动时偶尔会观察到右侧出现1px的残留内容，该问题仅在iPad设备上出现。

问题截图 #

修复方案 #

该问题是iPad端webkit内核渲染滑动元素时，浮点像素计算偏差导致的偶发绘制异常，可通过以下方案解决：

• 给滑块外层容器增加transform: translateZ(0) CSS属性，强制触发GPU加速渲染，规避webkit的像素绘制偏差
• 滑块内容列表的总宽度计算时额外增加1~2px冗余，同时在列表末尾追加1个和滑块背景色完全一致的2px宽占位元素，直接遮挡偶发溢出的像素内容
• 监听滑块滚动结束事件，当滚动位置已抵达最右侧时，手动将容器的scrollLeft赋值为「内容总宽度 - 容器可视宽度」，修正webkit自动计算的滚动位置偏差
• 给滑块内的所有图片元素添加image-rendering: -webkit-optimize-contrast属性，优化Safari下的图片渲染精度

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