什么时候Element.getBoundingClientRect保证更新/准确？ [英] When is Element.getBoundingClientRect guaranteed to be updated / accurate?

问题描述

我正在使用一些使用 Element.getBoundingClientRect （gBCR），以及内联样式更新，以执行计算。 这不是一般网站，如果有更好的CSS方法来执行此任务，我并不关心或感兴趣。

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

1. 获取父级的gBCR


2. 执行计算;


3. 父元素的子元素具有内联CSS样式



我保证，计算的客户端边界将在步骤4反映父对象的新的有界矩形
？




如果规范不能保证， 由现代 ¹ 浏览器实现？





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





---





¹ Modern：UIWebView +），WebView（Android 2+）和常见的Chrome / WebKit，FF，IE9 +疑似 - 包括移动版本。

解决方案

我在ios8.4.1 / Safari8.0上遇到gBCR不可靠的问题。





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




I am working on some code that uses Element.getBoundingClientRect (gBCR), coupled with inline style updates, to perform calculation. This is not for a general website and I am not concerned or interested in if there are "better CSS ways" of doing this task.

The JavaScript is run synchronously and performs these steps:

1. The parent's gBCR is fetched
2. Calculations are performed and;
3. A child element of the parent has inline CSS styles (eg. size and margins) updated
4. The parent's gBCR is fetched again

Am I guaranteed that the computed client bounds will reflect the new bounding rectangle of the parent at step 4?

If not guaranteed by a specification, is this "guaranteed" by modern¹ browser implementations? If "mostly guaranteed", what notable exceptions are there?

Elements are not being added to or removed from the DOM and the elements being modified are direct children of the parent node; if such restrictions / information is relevant.

---

¹"Modern": UIWebView (iOS 6+), WebView (Android 2+), and the usual Chrome/WebKit, FF, IE9+ suspects - including mobile versions.

解决方案

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.

这篇关于什么时候Element.getBoundingClientRect保证更新/准确？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！