不同移动端视图下Div间出现白线的问题排查

问题描述 #

创建了仅保留背景色和高度样式的最小可复现示例，发现Div元素之间会随机出现白线，该问题随屏幕尺寸变化而出现，在Chrome和Edge浏览器中存在，移动端模拟器及真实Edge环境均有此现象。

成因 #

这种白线是浏览器亚像素渲染机制导致的：

• 当元素的高度、间距为非整数像素，或页面缩放比例不是100%时，浏览器会对元素边界进行抗锯齿处理。
• 原本应完全贴合的两个色块，中间会被插入半透明的过渡像素，视觉上呈现为一条白线。
• 移动端视图（含模拟器）因设备像素比（DPR）的换算逻辑，更容易触发该渲染误差。

解决办法 #

• 使用整数尺寸/间距：确保所有块级元素的高度、margin、padding均为整数像素值，避免非整数的单位换算。
• 添加微小负margin：给相邻元素设置margin-top: -1px，让两个元素轻微重叠，覆盖亚像素渲染产生的缝隙。
• 统一背景色或用渐变填充：若父容器与子元素背景色一致，给父容器设置相同背景色；或给元素添加background-image: linear-gradient(#你的背景色, #你的背景色)，强制浏览器用渐变填充缝隙。
• 启用硬件加速：给元素添加transform: translateZ(0)或will-change: transform，让GPU参与渲染，减少亚像素计算误差。
• 规范视口设置：在移动端页面的<meta>标签中设置viewport-fit=cover，同时确保页面缩放比例为100%，避免浏览器自动缩放引发的像素偏差。

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