CSS输入框顶部边框显示异常：iPhone下边缘不锐利（疑似抗锯齿）

问题场景 #

为输入框配置如下通用样式：

input {
  font-size: 1rem;
  outline: none;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 0.8rem 0.7rem;
  color: gray;
}

跨端测试表现：

• 笔记本端网页浏览器：输入框所有边框边缘锐利清晰
• 安卓移动端网页浏览器：显示效果和笔记本端一致，无发虚问题
• iPhone移动端网页浏览器：输入框顶部边框呈现发虚、不锐利的模糊表现

问题本质 #

该显示差异和传统认知里的文字/图形抗锯齿渲染机制没有直接关联——很多开发者会误将这种边缘发虚的表现归因于iOS端抗锯齿强度过高，实际上核心诱因是iOS Safari的亚像素栅格对齐规则和其他浏览器存在差异：

1. 桌面端、安卓端的主流浏览器渲染1px实线边框时，会自动将边框边界吸附到设备的物理像素栅格上，哪怕布局计算得出的边框位置存在亚像素级偏移，也会通过边缘采样把轮廓对齐到锐利的物理像素边界，不会出现半透明的模糊描边。
2. iPhone端的iOS Safari不会自动帮开发者完成亚像素到物理栅格的吸附对齐，当输入框因为页面布局计算，刚好落在两个相邻物理像素的中间位置时，原本1px宽度的CSS边框就会被拆成两个宽度为0.5px的半透明栅格条，视觉上就会呈现出边缘不锐利、发虚的效果。

修复方案 #

• 根源解决：放弃原生的1px CSS边框，用伪元素绘制对齐物理像素的细边框，彻底规避亚像素计算误差
  具体实现代码：

input {
  position: relative;
  border: none; /* 移除默认原生边框 */
  /* 保留原有其他样式配置 */
}
input::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid gray;
  border-radius: 5px;
  /* 针对不同DPR的iOS屏幕做缩放对齐 */
  @media (-webkit-min-device-pixel-ratio: 2) {
    transform: scale(0.5);
  }
  @media (-webkit-min-device-pixel-ratio: 3) {
    transform: scale(0.333);
  }
  pointer-events: none; /* 不干扰输入框的交互点击 */
}

• 轻量适配：针对iOS场景，手动微调输入框的上边距偏移量，让原本错位的边框边界刚好吸附到物理像素栅格线上，不需要改动原有边框结构。
• 妥协优化：如果不想改动布局逻辑，可以把边框的不透明度调整到0.8左右，弱化半透明发虚带来的视觉突兀感，但没有从根源解决栅格错位问题。

内容的提问来源于stack exchange，提问作者Aman Perdana 2008