jquery/jquery

offset() can be inaccurate when pinch-zoomed

Open

#3,822 opened on Oct 19, 2017

View on GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (59,842 stars) (20,438 forks)batch import
Offsethelp wanted

Description

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

Contributor guide

Tech stack
javascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
understand jQuery's offset()visual vs layout viewport concept
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the bug by reviewing the test case at http://jsbin.com/vucayumeta and the WebKit bug linked. Understand the difference between layout viewport and visual viewport, and how getBoundingClientRect() and window.pageX|YOffset behave on zoom. Explore the jQuery offset() implementation in source files (likely src/offset.js) and consider using window.visualViewport API for correction.