Retina屏MacBook上CSS box-shadow生成的1px实线模糊问题求助

核心原因 #

MacBook Retina屏属于2x高DPI屏幕，1个CSS像素对应2个物理像素。当你的1px线条（包括box-shadow、SVG路径、渐变步长）的位置或尺寸没有对齐物理像素边界时，浏览器会触发亚像素渲染——将线条的颜色分散到相邻的物理像素上，导致视觉上出现模糊、发虚的效果。

你提到模糊位置不固定，正是因为不同元素的布局偏移可能产生不同的非整数像素位置，触发随机的亚像素拆分；而iPhone XS虽然也是高DPI屏，但其浏览器渲染引擎的像素对齐策略与MacOS上的Safari/Chrome略有差异，非Retina屏则不存在1:2的像素映射，所以线条能清晰显示。

可行解决方案 #

1. 强制元素对齐整数像素边界 #

检查元素及其父元素的top、left、width、height属性，避免出现.5px这类非整数偏移。比如：

• 避免使用百分比布局导致的非整数尺寸，必要时用calc()取整，如width: calc(100% - 2px)
• 移除可能产生亚像素偏移的非整数参数transform: translate()，或替换为整数像素的定位

2. 调整box-shadow的偏移量适配高DPI屏 #

将box-shadow的偏移量从1px改为0.5px，这样在Retina屏上刚好对应1个物理像素的实线，非Retina屏会自动舍入为1px，不影响显示：

.element {
  box-shadow: 0 0.5px #000, 0 -0.5px #000, 0.5px 0 #000, -0.5px 0 #000;
}

3. 给SVG添加像素对齐渲染属性 #

对于1px实心像素的SVG，添加image-rendering属性强制浏览器按像素边界渲染，禁用平滑插值：

svg {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

4. 修复CSS渐变滚动条的模糊问题 #

确保渐变的步长和位置是整数像素的倍数，比如将渐变的background-size设为2px 2px（对应Retina屏的1物理像素），并使用整数的颜色停止位置：

::-webkit-scrollbar {
  background: repeating-linear-gradient(0deg, #fff, #fff 2px, #eee 2px, #eee 4px);
}

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