为何在Chrome浏览器中，经过变换的子元素会出现边界框偏移？

嘿，这个问题我之前排查过，本质是元素应用变换后，子元素的计算值和实际渲染表现不一致导致的，给你详细说下：

• 当父元素被添加了变换（比如transform: translate()这类属性），子元素通过JavaScript方法（比如getBoundingClientRect()）获取到的计算位置/尺寸，和它实际在屏幕上渲染出来的位置会有明显偏差。
• 而且这个问题不光在JS代码里能发现，用Chrome的DevTools也能直观看到：比如你在DevTools里选中带有bilt-node="rectangle"属性的元素，鼠标悬停时显示的高亮边界框，和实际渲染的元素之间会有轻微的偏移。

这种情况的核心原因是浏览器在处理变换元素时，布局计算和视觉渲染用了两套不同的逻辑——布局计算还是基于变换前的原始坐标体系，而视觉渲染则应用了变换后的位置，两者没有完全同步，就导致了这种偏移现象。

内容来源于stack exchange