Chrome中嵌套transform场景下getBoundingClientRect()结合rotate变换返回错误值问题及解决方案咨询

你遇到的确实是Chrome曾经存在的一个已知bug——当带有旋转变换的元素被多层嵌套的transform容器包裹，且中间存在空div节点时，getBoundingClientRect()计算出的边界矩形会出现偏差，而Firefox的渲染引擎在这类场景下的处理逻辑更准确。

问题复现的代码示例 #

HTML代码 #

<html>
<body>
<div style="transform: translate(10px, 42px);">
<div style="width: 100px;height: 300px;background: black;">
<div style="transform: translate(140px, -10px);width: 400px;height: 300px;">
<div> <!-- 这个空div是问题触发点 -->
<div id="target" style="transform: translate(89px, 28px) rotate(2rad); width: 200px; height: 100px; background: green;"></div>
</div>
</div>
</div>
</div>
</body>
</html>

JS代码 #

var greenRectangle = document.getElementById("target")
var rect = greenRectangle.getBoundingClientRect()
var visualized = document.createElement("div")
visualized.style.position = "absolute"
visualized.style.border = "1px solid red"
visualized.style.top = rect.top+"px"
visualized.style.left = rect.left+"px"
visualized.style.width = rect.width+"px"
visualized.style.height = rect.height+"px"
visualized.style.background = "#ff00002e"
document.body.appendChild(visualized)

可行的规避方案 #

针对这类场景，有几种可以尝试的解决思路：

• 移除冗余的空容器节点：这是最直接的方案，就像你发现的那样，去掉包裹目标元素的空div后，Chrome的getBoundingClientRect()就能正常计算边界。如果业务允许清理DOM结构，优先选择这种方式。
• 使用getComputedStyle结合矩阵变换手动计算：如果无法修改DOM结构，可以通过获取元素的计算样式，提取变换矩阵，手动计算元素的真实边界。具体步骤包括：
  1. 获取元素的transform计算值，解析出变换矩阵
  2. 结合元素的原始宽高，计算变换后的四个顶点坐标
  3. 根据顶点坐标确定最终的边界矩形（取最小/最大的x、y值）
• 临时移除旋转变换计算后恢复：如果场景允许，可以先临时移除目标元素的rotate变换，调用getBoundingClientRect()获取基础位置，再结合旋转变换的角度手动修正边界。不过这种方式需要额外处理旋转后的坐标转换，复杂度较高。

补充说明 #

你提到当前示例的问题似乎已被修复，这很可能是Chrome后续版本中针对这类DOM嵌套+transform的场景做了渲染逻辑优化。但需要注意，getBoundingClientRect()在一些复杂的渲染场景下（比如元素被CSS clip-path裁剪、或者处于动态动画帧中）仍可能出现计算偏差，建议在关键场景下多做跨浏览器测试。

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