Zoom CSS property not working with BoundingClientRectangle
I am having trouble getting the coordinates of an element after transforming it using the "zoom" property. I need to know the coordinates of all four corners. I would normally accomplish this with the getBoundingClientRect property, which doesn't seem to work correctly when the element is being scaled. I have attached a short jsfiddle link to show what is not working. I am using Chrome, but the behavior is present in Firefox too.
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;
When I run this code, "100" is displayed for both the width before and after.
I found a lot of information, but everything I find seems to say that this was a known bug in Chrome and has been fixed since then. Does anyone know how to fix this or what I might be doing wrong?
source to share
This comment in the bug report is contained in several detailed regs. problem, but its status looks like "WontFix", so you are probably out of luck.
Some alternatives:
- If you used
transform: scale(1.5)
scaling instead, you would get the correct value ingetBoundingClientRect()
, but that would mess up the page layout. - You can use
window.getComputedStyle(div[0]).zoom
to get the scaling value of the item (in decimal) and multiply it by the width withgetBoundingClientRect()
source to share