Windows下输入框聚焦时下方红色错误文本对比度丢失问题

这是Windows版Chrome（126版本）在深色背景场景下的渲染bug：输入框聚焦时，相邻文本会出现视觉上字体变细、对比度降低的现象，但Web Inspector中不会显示样式属性变化。以下是几种可行的修复方案：

方案1：强制字体渲染模式 #

给错误文本元素添加字体平滑相关CSS属性，固定渲染行为：

<div style="background: black">
  <input type="text" />
  <p style="color: red; -webkit-font-smoothing: antialiased; font-weight: 400;">some text</p>
</div>

-webkit-font-smoothing: antialiased会强制浏览器使用抗锯齿渲染，避免聚焦时的渲染策略切换；明确font-weight: 400（正常权重）可消除浏览器对字体权重的自动调整。

方案2：触发硬件加速 #

通过CSS transform属性触发硬件加速，隔离文本的渲染上下文：

<div style="background: black">
  <input type="text" />
  <p style="color: red; transform: translateZ(0);">some text</p>
</div>

transform: translateZ(0)会让浏览器使用GPU渲染该元素，绕过导致异常的CPU渲染逻辑。

方案3：隔离渲染上下文 #

给输入框和错误文本分别包裹独立容器，切断两者的渲染关联：

<div style="background: black">
  <div><input type="text" /></div>
  <div><p style="color: red">some text</p></div>
</div>

这种方式让两个元素处于不同的渲染容器中，输入框聚焦时的渲染变化不会影响到错误文本。

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