Chrome设置background-color时出现奇怪色块问题求助

为body标签设置纯色背景时，页面出现一处无法定位来源的奇怪深色方块，仅找到一个5年前未得到解答的相关讨论，异常表现为页面角落存在深色块。

复现代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>My Boilerplate</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <p>Hello world</p>
    </body>
</html>

CSS代码 #

body {
    background: brown;
}

出现环境 #

• 仅在Chrome浏览器中出现，Safari无此问题
• 触发设备：2015年末款iMac（macOS Monterey）
• 无问题设备：2015年中款MacBook Pro（macOS Mojave）、iPad、iPhone

解决办法 #

这是Chrome在特定旧款Mac硬件+特定系统版本下的小众渲染bug，属于已知兼容性问题，可通过以下方式解决：

• 给html标签同步设置相同背景色，覆盖浏览器默认的根元素渲染逻辑：

  html, body {
      background: brown;
      margin: 0;
      padding: 0;
  }
  

• 用极小的同色渐变替代纯色背景，绕过Chrome的纯色渲染异常：

  body {
      background: linear-gradient(to bottom, brown, brown);
  }
  

• 升级Chrome到最新版本，或更新macOS系统，新版本已修复这类旧硬件上的渲染问题。

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