聚焦text input时周围非黑白文本标签变暗的Chrome/Edge异常问题咨询

问题现象 #

• 深色背景下，当文本输入框（<input type="text">）处于激活状态（光标闪烁）时，其下方所有非黑白文本的元素会出现视觉变暗的效果，类似被施加了滤镜
• 该影响会覆盖整个父级渲染栈内的下方元素，不管和输入框的距离有多远
• 检查CSSOM未发现任何属性变化，说明不是样式代码导致的异常

复现代码 #

<html style="color: #ffffff; background-color: #1e1e1e">
  <head></head>
  <body>
    <div>
      <input type="text" />
      <div style="color: #f54562">Error 1</div>
      <div style="color: #f54562">Error 2</div>
    </div>
  </body>
</html>

测试环境 #

• 可在Chrome 107.0.5304.107（64位）和Edge浏览器中复现
• Firefox浏览器无此问题

结论与解决办法 #

这是Chrome及基于Chromium内核的Edge浏览器的渲染bug，不属于已知特性。原因如下：

1. 异常效果没有对应的CSS属性变更，属于浏览器渲染层的异常表现
2. 仅在Chromium内核浏览器中出现，Gecko内核的Firefox不受影响
3. 通过将input设置为绝对定位可隔离效果，说明是渲染栈层级相关的异常

临时解决办法：

• 给input添加will-change: transform属性，强制浏览器为其创建独立渲染层，避免影响其他元素
• 给父容器添加transform: translateZ(0)，触发独立渲染层以隔离异常影响

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