Element.getBoundingClientRect 啥时候保证更新/准确？

Posted 2023-02-21

【中文标题】Element.getBoundingClientRect 啥时候保证更新/准确？

【英文标题】：When is Element.getBoundingClientRect guaranteed to be updated / accurate?Element.getBoundingClientRect 什么时候保证更新/准确？

【发布时间】：2015-01-04 23:12:36

【问题描述】：

我正在编写一些代码，它使用Element.getBoundingClientRect (gBCR) 以及内联样式更新来执行计算。 这不适用于一般网站，我不关心或感兴趣是否有“更好的 CSS 方式”来完成这项任务。

javascript 同步运行并执行以下步骤：

已获取父级的 gBCR 执行计算并且； 父元素的子元素已更新内联 CSS 样式（例如大小和边距） 再次获取父级的 gBCR

我是否保证计算出的客户端边界将反映第 4 步中父级的新边界矩形？

如果没有规范保证，这是现代¹ 浏览器实现“保证”吗？如果“大部分保证”，有哪些值得注意的例外情况？

元素不被添加到DOM或从DOM中删除，并且被修改的元素是父节点的直接子节点；如果此类限制/信息相关。

---

¹“现代”：UIWebView (ios 6+)、WebView (android 2+)，以及常见的 Chrome/WebKit、FF、IE9+ 嫌疑人 - 包括移动设备版本。

【问题讨论】：

我不能肯定地说，但我已经用 gBCR 做了很多工作，我几乎 100% 肯定它有效，因为许多关于如何“手动刷新”的问题该页面的样式包括调用 gBCR。我会得到一些链接

@Markasoftware 这听起来令人鼓舞！我对桌面浏览器（IE10+ 等）没有任何问题，但我的经验有限，而且我无法在移动设备或 OS X 上进行测试。

你有理由相信它不是实时更新的吗？

我没有任何权威资源来支持我，所以知道引擎的人应该真正回答，但我认为你在相当安全的基础上，根据我所看到的一切，假设gBCR 始终返回更新/准确的结果。

chrome 44 稳定 gBCR 为大型文档提供错误数据。努力创建一个小测试用例

【参考方案1】：

老问题，这个问题仍然让我感到困惑，在我的搜索中，我偶然发现了这个问题。它可能会帮助其他人。

我能找到使getBoundingClientRect() 可靠工作的最佳保证是在窗口顶部强制刷新，计算位置，然后返回用户所在的位置。

代码看起来像：

  scroll_pos = document.documentElement.scrollTop // save current position
  window.scrollTo(0, 0); // go up

  v_align = parseInt(el.getBoundingClientRect().top) // example of gBCR for vert.alignment
  //... whatever other code you might need
  window.scrollTo(0, scroll_pos); // get back to the starting position

通常操作速度很快，所以用户应该不会注意到它。

【参考方案2】：

我只是卡在 ios8.4.1/Safari8.0 上的 gBCR 不可靠性。

在 body 顶部准备一个大 div（gBCR 为 0）并滚动到底部（gBCR 为负数）。将 div 的大小调整为 1x1，然后 window.scrollY 自动变为 0。gBCR 也应该为 0，但仍保持负值。用setTimeout，200ms后，可以确认正确的值0。