Google Chrome DevTools 中的错误元素位置

Question

我有这样的 HTML 标记：

<div id="renderer-selection">
  <div class="renderer-selection-box">
    <div class="handle"></div>
  </div>
</div>

使用这样的样式：

#renderer-selection {
  position: absolute;
  transform: translate(200px, 200px);
}
.renderer-selection-box {
  position: absolute;
/*  transform: translate(0, 0); */
}
.handle {
  position: absolute;
  transform: rotate(30deg);
}
.handle::after {
  content: "";
  position: absolute;
  background-color: red;
  width: 5px;
  height: 18px;
  border: 1px solid #2FA5E7;
}

问题是在谷歌浏览器中使用检查工具时元素位置不正确：

当我取消注释样式中的空变换时，检查位置变为正确渲染。 自上次浏览器更新一两次后出现此行为。 这个问题的原因是什么？有人可以解释一下这种行为的含义吗？

All related code here on JSFiddle

Answer 1

这是因为你使用变换 您可以使用 这会更好：

#renderer-selection {
  position: absolute;
 /* transform: translate(200px, 200px); */
top: 200px;
 left: 200px;
}