深色背景滚动文本模糊：联想显示器异常MacBook正常的问题求助

问题详情 #

• 滚动页面时，body内的文本立即变得模糊
• 仅在Lenovo G32qc-10显示器上出现该问题，13英寸MacBook Air（2022 M2）无此现象
• 额外观察：该显示器在深色背景下滚动时部分文本显示异常，但ChatGPT等网站的深色模式滚动时文本无模糊问题
• 预期效果：绿色文本在滚动时保持清晰，无模糊现象

复现代码 #

<html>
<head>
  <style>
    body {
      background-color: black;
      -webkit-font-smoothing: antialiased;
    }
    
    span {
      color: white;
    }
  </style>
</head>
<body>
  <span>Text Goes Transparent</span>
  <span>Text Goes Transparent</span>
  <span>Text Goes Transparent</span>
  <!-- ... -->
</body>
</html>

已尝试的无效方法 #

• 调整-webkit-font-smoothingCSS属性无改善
• 仅当body背景色改为白色时，文本滚动时能保持清晰

解决方案 #

1. 触发硬件加速优化渲染 #

给body添加transform: translateZ(0)，强制浏览器使用GPU渲染，避免滚动时的临时模糊：

body {
  background-color: black;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
}

2. 优化文本元素的渲染属性 #

给文本容器（span）添加backface-visibility: hidden，配合硬件加速提升渲染稳定性：

span {
  color: green; /* 匹配预期的绿色文本 */
  backface-visibility: hidden;
}

3. 提前告知浏览器滚动行为 #

使用will-change属性让浏览器提前准备滚动时的渲染，减少临时优化导致的模糊：

body {
  will-change: scroll-position;
}

4. 检查显示器设置 #

部分显示器的动态对比度、自适应清晰度等功能可能在深色背景下干扰文本渲染，尝试关闭这类功能，恢复默认显示设置。

原理说明 #

这类问题多为浏览器滚动时的性能优化策略与特定显示器的深色显示特性冲突导致：浏览器为了提升滚动帧率，会临时降低文本渲染精度，而在深色背景+特定显示器的组合下，这种优化会表现为明显的模糊。通过触发硬件加速或调整渲染属性，可以强制浏览器使用更稳定的渲染路径，避免该异常。

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