为什么添加rotate(0deg)可修复CSS动画的元素渲染异常问题

此前，我在给元素添加动画时遇到了一个视觉渲染bug：

简单来说，四个圆形中位于右下角的最后一个圆形出现了边缘被压平的问题：

我找到了一个解决方案：在动画的其中一个关键帧中添加rotate(0deg)。

@keyframes shuffle {
    0%, 95%, 100% {
        transform: translate(0, 0) rotate(0deg); /* 修复成功！ */
    }
    20%, 25% {
        transform: translate(2.5rem, 0);
    }
    /* 其余代码省略 */
}

请问为什么该方案能生效？
我从Chromium的bug讨论中得到的思路，讨论里提到了和将元素提升到独立层/独立上下文相关的内容，但没完全理解原理。

这个现象是Chromium内核浏览器的渲染层裁剪计算偏差导致的，原理如下：

• 浏览器渲染页面时会把多个普通元素合并到同一个渲染层里绘制，计算层的裁剪边界时会综合层内所有元素的初始位置、动画路径范围来估算，当元素刚好落在估算的裁剪边界附近时，就可能出现边缘被误裁剪的情况，也就是你看到的圆形边缘被压平的问题。
• Chromium内核有专门的合成层触发规则：只要元素的transform属性中包含rotate（哪怕是0deg的无视觉效果旋转）、translate3d、perspective这类属性，就会自动把该元素提升到独立的合成渲染层，不和其他普通元素共享渲染空间。
• 你添加rotate(0deg)之后，动画元素被单独放到了独立层，独立层的裁剪边界是针对该元素自身的尺寸、完整动画路径单独计算的，不会受其他同层元素的边界影响，自然就不会出现之前的误裁剪问题。

类似效果的修复方案还有添加transform: translateZ(0)、will-change: transform，本质都是触发独立合成层提升，规避同层裁剪的计算误差。 #

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