Safari输入框自动填充后编辑出现字符串重叠视觉Bug

可能原因 #

该现象大概率是Safari自动填充时的渲染Bug，尤其在自定义输入框样式（比如设置了-webkit-appearance: none）后，浏览器的自动填充层与实际输入层出现偏移或重叠。

具体解决方案 #

1. 修复Safari自动填充伪类样式 #

Safari会给自动填充的输入框添加-webkit-autofill伪类，通过重置该伪类下的样式，强制统一渲染逻辑：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* 用内部阴影覆盖浏览器默认的自动填充背景色 */
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
  /* 强制文字颜色与输入框默认样式一致 */
  -webkit-text-fill-color: var(--color-darkblue) !important;
  /* 禁用过渡动画，避免渲染延迟导致的错位 */
  transition: background-color 5000s ease-in-out 0s;
}

2. 移除可能引发冲突的定位样式 #

你给输入框设置了position: relative，尝试移除该属性——Safari在自动填充时，对相对定位元素的层叠处理可能出现异常：

input:is([type="text"],[type="number"],[type="email"],[type="tel"],[type="url"],[type="date"]),select {
    position: static;
}

3. 调整输入框高度限制 #

max-height: 2.75em可能限制了输入框实际高度，导致自动填充内容渲染时出现高度不足的重叠问题。可以尝试去掉该属性，或设置固定高度：

input:is([type="text"],[type="number"],[type="email"],[type="tel"],[type="url"],[type="date"]),select {
    max-height: unset;
    height: 2.75em;
}

4. 精准控制自动填充行为（极端情况） #

若以上方法无效，可通过HTML属性精准控制输入框的自动填充：

<!-- 完全禁用自动填充（部分浏览器可能失效） -->
<input type="text" autocomplete="off" />
<!-- 针对特定字段设置，避免影响浏览器辅助功能 -->
<input type="email" autocomplete="username" />

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