CSS中100%高度绝对定位元素异常白边问题求解

问题本质 #

这类“非整数倍缩放下出现白边、放大后自动消失”的问题，核心是浏览器亚像素渲染偏差：

• 父元素应用transform: translateX(-50%)实现居中时，会生成独立的GPU合成层，非100%页面缩放状态下，合成层的边界会出现像素舍入误差
• 子元素通过百分比、calc()计算出的尺寸会带有小数像素值，相邻元素的边界舍入规则不统一时，就会出现细微缝隙，漏出父元素的白色背景形成可见白边。当页面放大到整数倍缩放时，所有元素的像素值刚好对齐到物理像素网格，缝隙自然消失。

可直接落地的修复手段 #

• 给相邻的绝对定位子元素增加1px视觉无感知的重叠区，彻底堵死缝隙：
• .goPrev 保持left:0不变，宽度从36px调整为37px
• .goMid 保持left:36px不变，宽度从calc(100% - 72px)调整为calc(100% - 71px)
• 给.goNext补right:0定位，宽度从36px调整为37px
  1px的重叠区域不会被人眼感知，却能完全消除漏底的缝隙
• 修正父元素的transform偏移值，强制对齐整数像素网格：将.loop的transform: translateX(-50%)调整为transform: translateX(calc(-50% + 0.5px))，消除合成层渲染时的亚像素偏移
• 强制子元素走整数像素对齐逻辑：给所有子元素添加transform: translateZ(0)，触发GPU渲染时的整数像素对齐规则，避免小数像素缝隙
• 从布局根源规避合成层偏差：用left: calc(50% - 125px)（父元素固定宽度250px，半宽为整数125px）替代transform: translateX(-50%)实现居中，从根源上避免合成层带来的渲染误差

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