使用translateY实现整页滑动过渡时出现页面衔接神秘白线如何修复

这个白线本质是GPU合成层的亚像素对齐间隙，和你选择的实现方式的渲染路径直接相关：

• translateY属于纯合成属性，不会触发浏览器重排流程，浏览器的合成器拿到计算好的位移值后，会直接在独立的GPU层上渲染内容，不会主动做布局层面的像素对齐。当设备像素比（DPR）不是整数（比如移动端常见的1.5x、2x DPR）时，亚像素计算会在两个相邻的页面合成层之间留出最多1个物理像素的空隙，空隙会透露出页面根节点的默认白色背景，就是你看到的白线。
• 而top属性属于布局属性，修改时会触发浏览器重排流程，布局引擎会强制把所有元素的位置对齐到整数设备像素上，从根源上避免了亚像素间隙，所以切换成top实现后白线会完全消失。

不需要放弃translateY的实现逻辑，用下面任意一种方案都可以彻底消除白线：

• 给相邻的页面容器做1px的垂直重叠。可以给每个页面容器设置margin-bottom: -1px，让上下两个页面在垂直方向自然叠1px，把可能出现的间隙完全挡在层叠关系下方。因为页面的内容通常会留出边缘边距，这点重叠不会造成正常视觉内容的裁切，也不会被用户感知到。
• 对计算得到的translateY位移值做整数取整处理。在把位移值赋值给transform属性前，用Math.round()把浮点计算的结果转换成整数像素值，避免合成器拿到半像素、三分之一像素这类亚像素值，从输入源头消除错位的可能。
• 把每个整页容器的高度设置为calc(100vh + 1px)，让每个页面的上下边缘都多延伸1px的高度，相邻页面之间自然形成重叠区域，哪怕合成层出现1px以内的错位，也不会露出后方的背景色。
• 兜底方案：把页面根节点（body）的默认背景色设置为和你页面主背景一致的深色，就算出现微小间隙，透出来的颜色也会和页面内容完全融合，不会出现肉眼可辨的白线。
• 可选优化：给所有参与滑动切换的页面容器加上transform: translateZ(0)，强制把这些元素提升为独立合成层，避免合成器在层绘制时的插值错位，进一步降低间隙出现的概率。

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