jquery
offset() can be inaccurate when pinch-zoomed
Bug Reports:
- What do you expect to happen? offset() should return offset from document origin
- What actually happens? On some browsers, it can be off when pinch-zoomed
- Which browsers are affected? Edge, possibly Safari in the future.
Description
Open the console and click/tap on the input box. Now pinch-zoom into the page, scroll to the very top, then scroll back down to the input box and tap it. The output should always be the same.
See https://bugs.webkit.org/show_bug.cgi?id=170981 for some background and https://developers.google.com/web/updates/2017/09/visual-viewport-api for the details.
The issue is that offset() is adding getBoundingClientRect (which is relative to the layout viewport) to window.pageX|YOffset which is relative to the visual viewport.
Note: Chrome recently made pageYOffset relative to the layout viewport so this isn't an issue there.
Link to test case
http://jsbin.com/vucayumeta
Thanks for opening an issue. This may need to be fixed by browsers, but we'll leave open for the time being in case anyone finds a workaround.
The workaround is for offset() to diff the documentElement's getBoundingClientRect and the element's getBoundingClientRect if I recall correctly.
Right, the offset for element E can be calculated as:
offset.y = E.getBoundingClientRect().y - document.documentElement.getBoundingClientRect().y
But it has a (maybe a bit of esoteric) edge-case. If the page adds an offset or transform on the documentElement the result will be relative to the transformed documentElement, rather than the scroll origin - which differs from the current semantics. But maybe that's ok?
@smfr or @bokand would either of you like to submit a PR? As far as the CSS offset/transform problem we already document that our dimensions are not accurate for those cases.
