CSS动画在特定position属性值下出现闪烁Bug的原因咨询

核心诱因 #

这类闪烁的本质是不同position属性对应的浏览器渲染层规则、重排重绘触发逻辑存在差异，和浏览器的合成层创建、硬件加速调度逻辑直接相关：

• 元素设置position: absolute/position: relative时：这类元素会独立创建z轴堆叠上下文，满足浏览器默认的合成层提升条件，会被分配到独立的GPU合成层渲染。hover触发的过渡动画（尤其是transform、opacity这类可直接在GPU端计算的属性）不需要主线程参与重排重绘，动画帧和屏幕刷新率同步，运行完全正常。
• 元素设置position: static（默认值）时：元素完全处于常规文档流中，默认不会被提升为独立合成层。hover触发动画时，浏览器需要在主线程反复计算元素的文档流占位、相邻元素的位置偏移，高频触发重排重绘，和屏幕刷新节奏不同步就会出现闪烁。
• 元素设置position: fixed时：元素定位基准为浏览器视口，虽然本身会创建堆叠上下文，但如果hover动画修改了元素尺寸、偏移属性，浏览器会在每一帧动画里反复校验元素和视口的相对位置、触发视口锚定重算，尤其是页面存在滚动条时，这类重算很容易和动画帧刷新错位，引发闪烁。
• 元素设置position: sticky时：sticky是相对定位和固定定位的混合模式，浏览器会持续监听滚动位置，在relative和fixed两种定位状态之间动态切换，本身就需要持续更新定位缓存。hover触发的样式变化会反复打断这个缓存，导致定位状态在动画过程中异常切换，直接触发闪烁。

通用修复方案 #

给需要绑定hover过渡动画的元素添加以下CSS属性，强制将元素提升为独立GPU合成层，绕开主线程的重排重绘逻辑，即可消除闪烁：

.target-element {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

注意：不要滥用合成层提升规则，页面中过多的独立GPU合成层会占用大量显存，反而会导致页面滚动、动画卡顿。

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