Grid布局中Transition引发后续元素过度重绘的原因与解决办法

问题现象 #

在Chrome v120.0.6099.72中，当鼠标离开带有relative类的图片元素时，过渡效果会触发该元素之后的所有图片重绘——即便布局并未发生变化。若图片数量多或尺寸较大，会明显引发掉帧。可通过devtool -> rendering panel -> Paint flashing可视化观察重绘范围。

最小复现代码 #

<!DOCTYPE html>
<html>
<body style="width: 410px;">
  <div class="grid grid-cols-2">
    <div class="contents"><img class="relative transition p-1" src="https://picsum.photos/200"></div>
    <div class="contents"><img class="relative transition p-1" src="https://picsum.photos/200"></div>
    <div class="contents"><img class="relative transition p-1" src="https://picsum.photos/200"></div>
    <div class="contents"><img class="relative transition p-1" src="https://picsum.photos/200"></div>
  </div>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    for (const el of document.querySelectorAll(".contents > img")) {
      el.addEventListener("mouseenter", function() { this.classList.add("easy-in-out", "scale-150", "scale", "z-20"); });
      el.addEventListener("mouseleave", function() { this.classList.remove("easy-in-out", "scale-150", "scale", "z-20"); });
    }
  </script>
</body>
</html>

过度重绘的核心原因 #

1. relative定位与堆叠上下文的交互：带有relative类的元素会创建独立堆叠上下文，当鼠标离开时移除z-20（对应z-index: 20），元素的堆叠顺序发生变化。Chrome渲染引擎在处理过渡动画结束后的堆叠上下文变更时，错误地将同Grid轨道中后续元素的区域判定为需要重绘，认为这些元素可能被之前的过渡元素遮挡或影响。
2. Grid布局的区域计算逻辑：Grid容器的元素排列紧密，浏览器的重绘区域算法在处理relative元素的变换过渡时，没有精准限定重绘范围到单个元素，而是扩展到了后续同布局流中的元素，导致批量重绘。

可行解决方案 #

• 移除relative类：静态定位的元素不会创建额外堆叠上下文，堆叠顺序变化不会触发大范围重绘，这是最直接的修复方式。
• 使用contain属性：给每个.contents容器添加style="contain: layout paint size"，强制浏览器限定该元素的布局、重绘和尺寸计算范围，避免影响其他元素。
• 谨慎使用will-change: scale：该属性会让浏览器提前为元素的缩放变换分配GPU资源，精准限定重绘范围，但大量使用会增加GPU负载，仅适合局部少量元素场景。

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