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

Question

我正在研究一些使用Element.getBoundingClientRect（gBCR）和内联样式更新的代码来执行计算。 这不适用于一般网站，如果有“更好的CSS方式”来执行此任务，我并不关心或感兴趣。

JavaScript以同步方式运行并执行以下步骤：

1. 获取父母的gBCR
2. 执行计算并且;
3. 父级的子元素已更新内联CSS样式（例如，大小和边距）
4. 再次获取父母的gBCR

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

如果规范不能保证，现代 ¹ 浏览器实现“保证”吗？如果“主要是保证”，那么有什么明显的例外？

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

---

¹ “现代”：UIWebView（iOS 6+），WebView（Android 2+），以及通常的Chrome / WebKit，FF，IE9 +嫌疑人 - 包括手机版本

Answer 1

I'm just stuck at gBCR unreliability on ios8.4.1/Safari8.0.

Prepare a large div on top of body (gBCR is 0) and scroll to bottom (gBCR is negative). Resize the div into 1x1 then window.scrollY automatically goes 0. gBCR should also be 0 but still stay negative value. With setTimeout, 200ms later, you can confirm the right value 0.

Answer 2

老问题，这个问题仍然困扰着我，在搜索中我跌倒了。这可能会帮助其他人。

我能找到使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

通常该操作快如闪电，因此用户不应注意到它。