Chrome与Safari及外接显示器CSS背景色渲染差异问题排查

针对你遇到的Chrome与Mac桌面端Safari（含外接显示器）CSS背景色渲染差异问题，核心原因如下：

• 浏览器渲染引擎的色彩处理逻辑差异
  Chrome基于Blink引擎，Safari基于WebKit引擎，两者对CSS blur()滤镜的颜色混合算法、色彩空间转换逻辑不同。大模糊半径下，WebKit会更严格遵循Mac系统的色彩管理规则，而Chrome采用了独立的色彩处理管线，导致模糊后的颜色呈现偏差。图片是预渲染的位图，已经完成色彩校准，所以跨设备浏览器显示一致。

• 多显示器的DPI与渲染精度差异
  MacBook M2的Retina屏与外接LG HDMI显示器DPI不同，Safari在不同DPI设备上对CSS模糊效果的采样精度、渲染管线（硬件加速调度）有区别。再加上元素的旋转（rotate）和绝对定位组合，进一步放大了颜色渲染的差异。

• CSS滤镜的跨浏览器实现细节差异
  blur()滤镜在WebKit和Blink中的模糊算法细节存在差异，尤其是大半径模糊时，颜色扩散的计算方式不同。同时，Tailwind CSS的颜色类（如bg-lime-300、bg-green-500）在不同引擎中的颜色解析存在细微偏差，经过模糊滤镜后被放大，导致视觉上的明显差异。

• 桌面与移动端Safari的渲染管线差异
  移动端Safari的WebKit引擎针对移动设备做了专门的渲染优化，尤其是硬件加速部分的逻辑和桌面端不同，因此没有出现同样的颜色偏差问题。

相关代码 #

原Next.js + TailwindCSS代码

<div className="w-[1082.67px] h-[942.47px] relative">
    <div className="w-[612.32px] h-[733.02px] left-[372.45px] top-0 absolute origin-top-left rotate-[30.54deg] bg-lime-300 rounded-full blur-[110px]"></div>
    <div className="w-[327.26px] h-[443.83px] left-[969.39px] top-[259px] absolute origin-top-left rotate-[69.75deg] bg-green-500 rounded-full blur-[110px]"></div>
</div>

ReactJS测试代码

function App() {
  return (
    <div className="App">
      <div style={{ width: "100%", height: "100%", position: "relative" }}>
        <div
          style={{
            width: 768.94,
            height: 803.25,
            left: 496.6,
            top: 0,
            position: "absolute",
            transform: "rotate(23.87deg)",
            background: "#BFEE5C",
            borderRadius: 9999,
            filter: "blur(241px)",
          }}
        />
        <div
          style={{
            width: 342.17,
            height: 576.05,
            left: 1292.52,
            top: 259,
            position: "absolute",
            transform: "rotate(63.80deg)",
            background: "#29CA6D",
            borderRadius: 9999,
            filter: "blur(241px)",
          }}
        />
      </div>
    </div>
  );
}

ReactDOM.render(<App/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

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