浏览器缩放时div与边框之间出现1px白色线条问题求助

问题原因 #

这类缩放时出现的1px细线是浏览器亚像素渲染导致的常见错位问题：当元素同时设置背景色（或渐变背景）和边框时，非100%缩放比例下CSS像素和设备物理像素无法完全对齐，浏览器计算出的背景填充边界和边框渲染边界出现小数级的偏移，缝隙漏出下层白色背景就会形成你看到的白线，渐变背景加边框的组合属于这类问题的高发场景。

可行解决方案 #

• 优先尝试给出现问题的div添加background-clip: padding-box属性，该属性会强制背景仅填充到内边距边界，不会延伸到边框下方，避免两者渲染边界错位，绝大多数场景下都可以直接解决问题。
• 如果上述方案无效，可将边框改为内阴影模拟：把原有border: 1px solid [你的颜色值]替换为box-shadow: inset 0 0 0 1px [你的颜色值]，内阴影的渲染逻辑和边框不同，不会出现缩放错位问题。
• 兜底方案可以给问题div的父容器设置和div相同的背景色，就算出现缝隙也不会露出白色，不影响视觉效果。
• 部分场景下给元素添加transform: translateZ(0)开启硬件加速，也可以修正渲染偏移的问题。

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