Chrome中输入框聚焦导致字体模糊/抗锯齿异常的修复咨询

Chrome浏览器（版本111.0.5563.65 64位正式版）存在如下异常：当页面包含输入框时，聚焦输入框会触发字体抗锯齿效果变化，深色背景搭配浅色文字时该差异尤为明显，调整-webkit-font-aliasing相关属性无法解决此问题。该问题在Tailwind CSS环境和原生CSS环境下均能复现。

问题现象对比 #

• 未聚焦状态：
  
• 聚焦状态：
  

原生CSS环境下的现象：

• 未聚焦状态：
  
• 聚焦状态：
  

原生CSS复现代码 #

HTML

<input type='text' />
<p>Something went wrong</p>

CSS

body {
  background: #000;
  color: #ccc;
}

可行修复方案 #

1. 添加极细微文本描边强制统一抗锯齿

通过-webkit-text-stroke给文本添加几乎不可见的同色系描边，强制Chrome保持一致的抗锯齿渲染逻辑：

body {
  background: #000;
  color: #ccc;
  -webkit-text-stroke: 0.05px rgba(204, 204, 204, 0.3);
}

该方法通过改变文本渲染的底层触发条件，避免聚焦输入框时的渲染模式切换。

2. 触发硬件加速稳定渲染上下文

对页面文本元素添加transform: translateZ(0)触发GPU硬件加速，让文本渲染脱离输入框聚焦时的渲染波动：

p {
  transform: translateZ(0);
}

硬件加速会将文本渲染独立到GPU层，不受输入框聚焦时的浏览器内部渲染优化影响。

3. 统一输入框聚焦前后的渲染属性

给输入框强制设置与页面文本一致的字体渲染属性，减少浏览器的自动优化差异：

input, input:focus {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: inherit;
}

确保输入框无论聚焦与否，都使用和页面其他文本相同的渲染规则，避免触发特殊渲染逻辑。

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