Chrome DevTools检查元素位置显示错误问题咨询

问题成因 #

这是Chrome近期版本更新后开发者工具引入的已知Bug，核心是元素高亮的坐标计算逻辑对嵌套绝对定位+Transform层叠上下文的处理存在缺陷，底层逻辑如下：

• 根据CSS规范，transform属性值不为none的元素会创建新的层叠上下文，同时成为内部所有绝对定位元素的包含块。
• 示例代码中，最外层#renderer-selection设置了transform: translate(200px, 200px)，因此它是内部所有绝对定位元素的包含块。中间层.renderer-selection-box仅设置了position: absolute、未设置transform，不会创建新的层叠上下文，因此内部.handle元素的实际包含块仍然是最外层的#renderer-selection。
• 最新版Chrome开发者工具的元素高亮模块存在逻辑漏洞：计算嵌套绝对定位元素的屏幕坐标时，没有正确回溯到最顶层的transform包含块，错误地将没有transform属性的中间绝对定位元素作为坐标计算基准，导致最终计算出的高亮偏移量多算了中间节点的坐标差，就出现了高亮位置和元素实际渲染位置不符的异常。
• 当给.renderer-selection-box加上transform: translate(0, 0)后，该节点触发了新的层叠上下文，成为了.handle的包含块，开发者工具的坐标计算逻辑在这种明确分层的场景下不会出错，高亮位置自然恢复正常。

临时规避方案 #

除了添加空transform之外，也可以给中间层.renderer-selection-box添加will-change: transform属性，同样可以触发层叠上下文规避这个Bug，等待Chrome后续版本修复即可。

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