<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - getBoundingClientRect returns incorrect position when pinch-zoomed"
href="https://bugs.webkit.org/show_bug.cgi?id=160548">160548</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>getBoundingClientRect returns incorrect position when pinch-zoomed
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Local Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>OS X 10.11
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>New Bugs
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>bokan@chromium.org
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=285316" name="attach_285316" title="Demo of the bug">attachment 285316</a> <a href="attachment.cgi?id=285316&action=edit" title="Demo of the bug">[details]</a></span>
Demo of the bug
getBoundingClientRect reports incorrect 'top' and 'left' values when the page is pinch-zoomed. I've narrowed down the problem to Document::adjustFloatRectForScrollAndAbsoluteZoomAndFrameScale, which subtracts the Frame's scroll position (which is already in CSS pixels, i.e. is divided by the frameScaleFactor) from the rect and then scales the rect by 1/frameScaleFactor. This means the frame's scroll position, as applied to the rect, is scaled by frameScaleFactor twice. It also seems to me that the bounding box returned in Element::getBoundingClientRect has the position in CSS pixels by the size in DIPs. That is, printf'ing the FloatRect returned by quads[0].boundingBox() shows that pinch-zooming in causes the size to increase but not the position.
If I want to get the correct getBoundingClientRect as a page author today, I have to perform this calculation:
var rect = element.getBoundingClientRect();
var pageScaleFactor = window.outerWidth / window.innerWidth;
var correctedTop = rect.top*pageScaleFactor + window.scrollY*pageScaleFactor - window.scrollY;
I've attached a demo page showing the bug. It *should* keep the red box fixed to the top of the viewport but you can see that scrolling causes the box to move down faster than the page. You can uncomment the "corrected" calculation to see how it should look. I've also hosted this at <a href="http://bokan.ca/getBoundingClientRectBug.html">http://bokan.ca/getBoundingClientRectBug.html</a> for convenience.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>