Google Chrome使用CSS过渡时Alpha混合渲染结果不一致问题

该现象属于Chromium内核合成层机制带来的固有渲染差异，你的前端代码写法没有错误。

测试环境为Windows 10 + Chrome 102.0.5005.115，复现逻辑为给半透明元素绑定transition属性做transform位移动画，实际渲染表现为：

• 元素处于移动状态时，Alpha混合后取色结果为rgb(222, 255, 192)
• 元素静止后，Alpha混合后取色结果为rgb(204, 255, 181)
• 相同代码在Firefox 101.0.1版本中渲染结果一致，无上述状态差异

复现用完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        #toMove {
            transition: transform 1s;
            width: 350px; height: 350px; background-color: rgba(0, 255, 0,0.3);
        }
    </style>
    <script type="text/javascript">
        document.addEventListener("mousemove", function (e) {
            let x = e.clientX;
            document.getElementById("toMove").style.transform = "translate(" + x + "px, 0px)";
        });
    </script>
</head>
<body>
    <div id="toMove"></div>
</body>
</html>

Chrome在检测到元素有transform+transition的动画配置时，会在动画运行阶段自动将元素提升为独立的GPU合成层，跳过主线程的软件渲染流程，直接由GPU负责图层绘制和混合。这个过程中GPU对Alpha通道的混合计算逻辑、色彩精度和静止状态下普通图层的CPU渲染逻辑存在细微差别，最终就会呈现出可观测的色彩值差异。
这种差异不是代码不符合规范导致的，transform结合transition实现位移动画是标准的CSS写法，不存在语法或逻辑错误。

如果需要统一元素运动和静止状态的渲染结果，可以给目标元素添加will-change: transform属性，强制元素始终作为独立合成层渲染，让静止和运动状态都走相同的GPU渲染路径，即可消除该色彩差异。不推荐通过关闭浏览器硬件加速的方式规避问题，该操作会大幅影响页面整体渲染性能。

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