CSS Zoom属性不适用于BoundingClientRectangle

Question

使用“ zoom”属性转换元素后，获取元素的坐标时遇到麻烦。我需要知道所有4个角的坐标。我通常使用getBoundingClientRect属性来完成此操作，但是在缩放元素时似乎无法正常工作。我附加了一个简短的jsfiddle链接，以显示似乎无效的内容。我正在使用Chrome，但Firefox上也存在该行为。

http://jsfiddle.net/GCam11489/0hu7kvqt/

HTML：

<div id="box" style="zoom:100%">Hello</div><div></div><div></div>

JS：

var div = document.getElementsByTagName("div");
div[1].innerHTML = "PreZoom Width: " + div[0].getBoundingClientRect().width;
div[0].style.zoom = "150%";
div[2].innerHTML = "PostZoom Width: " + div[0].getBoundingClientRect().width;

当我运行该代码时，缩放前后的宽度都显示为“ 100”。

我发现了很多信息，但是我发现的所有内容似乎都说这是Chrome上的已知错误，并已得到修复。有谁知道如何纠正或我可能做错了什么？

Answer 1

对错误报告的评论涉及一些详细的规则。问题，但其状态似乎是“WontFix”，所以您可能不走运。

一些替代方案：

• 如果您要使用transform: scale(1.5)而不是缩放，您将在 中获得正确的值getBoundingClientRect()，但它会扰乱页面布局。
• 您可以用来window.getComputedStyle(div[0]).zoom获取元素的缩放值（以小数为单位）并将其乘以宽度getBoundingClientRect()