Bug 160548 - getBoundingClientRect returns incorrect position when pinch-zoomed
Summary: getBoundingClientRect returns incorrect position when pinch-zoomed
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: WebKit Local Build
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-08-04 06:47 PDT by David Bokan
Modified: 2017-06-29 09:19 PDT (History)
1 user (show)

See Also:


Attachments
Demo of the bug (1.39 KB, text/html)
2016-08-04 06:47 PDT, David Bokan
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description David Bokan 2016-08-04 06:47:09 PDT
Created attachment 285316 [details]
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 http://bokan.ca/getBoundingClientRectBug.html for convenience.
Comment 1 Ali Juma 2017-06-28 08:31:16 PDT
The behavior in Safari Tech Preview 33 matches Chrome Canary -- the box's bounding client rect remains (0, 0) 100x100 under pinch zoom + scroll, so the box stays fixed to the top of the layout viewport. David, can you double-check that this is no longer a bug?
Comment 2 David Bokan 2017-06-29 09:19:39 PDT
Yes, it looks like this works correctly as of Safari 10.1.1