New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

offset() can be inaccurate when pinch-zoomed #3822

Open
bokand opened this Issue Oct 19, 2017 · 6 comments

Comments

Projects
None yet
4 participants
@bokand

bokand commented Oct 19, 2017

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

@timmywil timmywil added the Offset label Oct 30, 2017

@timmywil

This comment has been minimized.

Show comment
Hide comment
@timmywil

timmywil Oct 30, 2017

Member

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.

Member

timmywil commented Oct 30, 2017

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.

@smfr

This comment has been minimized.

Show comment
Hide comment
@smfr

smfr Nov 1, 2017

The workaround is for offset() to diff the documentElement's getBoundingClientRect and the element's getBoundingClientRect if I recall correctly.

smfr commented Nov 1, 2017

The workaround is for offset() to diff the documentElement's getBoundingClientRect and the element's getBoundingClientRect if I recall correctly.

@bokand

This comment has been minimized.

Show comment
Hide comment
@bokand

bokand Nov 2, 2017

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?

bokand commented Nov 2, 2017

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?

@timmywil timmywil added this to the 3.4.0 milestone Jan 22, 2018

@timmywil

This comment has been minimized.

Show comment
Hide comment
@timmywil

timmywil Jan 22, 2018

Member

When fixing this, the fix might be able to incorporate #3479.

Member

timmywil commented Jan 22, 2018

When fixing this, the fix might be able to incorporate #3479.

@dmethvin

This comment has been minimized.

Show comment
Hide comment
@dmethvin

dmethvin May 14, 2018

Member

@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.

Member

dmethvin commented May 14, 2018

@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.

@bokand

This comment has been minimized.

Show comment
Hide comment
@bokand

bokand May 17, 2018

I can do it but I won't have the time to do it in the next few weeks

bokand commented May 17, 2018

I can do it but I won't have the time to do it in the next few weeks

@timmywil timmywil modified the milestones: 3.4.0, Future Sep 24, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment