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

Dropdown displaced when using pinch zoom #5048

Closed
ZhaofengWu opened this Issue Sep 22, 2017 · 13 comments

Comments

Projects
None yet
2 participants
@ZhaofengWu

ZhaofengWu commented Sep 22, 2017

This is reproducible in the demo page. Click on the first example, and then zoom in. The dropdown will become displaced. Tested on macOS Sierra with Chrome.

image

@ZhaofengWu

This comment has been minimized.

ZhaofengWu commented Sep 22, 2017

Looks similar to #4058, but are actually different.

@alexweissman

This comment has been minimized.

Contributor

alexweissman commented Sep 22, 2017

I'm also using Sierra but I can't seem to replicate this. Which version of Chrome are you using?

When I zoom in (using Cmd++), it seems to behave as expected:

screen shot 2017-09-22 at 10 52 08 am

@ZhaofengWu

This comment has been minimized.

ZhaofengWu commented Sep 22, 2017

I was zooming in by pinching on the trackpad. Cmd++ works fine for me too. My chrome is on version 60.0.3112.113.

@ZhaofengWu

This comment has been minimized.

ZhaofengWu commented Sep 22, 2017

Reproducible in Safari 11.0 (12604.1.38.1.7) as well.

image

@alexweissman

This comment has been minimized.

Contributor

alexweissman commented Sep 22, 2017

Interesting! It would seem that in Chromium, pinch-zoom and browser zoom are two completely separate implementations 😱

See this Chromium bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=378826

@ZhaofengWu

This comment has been minimized.

ZhaofengWu commented Sep 22, 2017

Hmm, but why the displacement in Safari?

I also tried Firefox, which seems only have the browser zoom, hence not having this problem.

@alexweissman

This comment has been minimized.

Contributor

alexweissman commented Sep 22, 2017

I'm not sure, but Safari might have a similar implementation of pinch-zoom. It's not clear if this is a problem that Select2 should attempt to solve. Is there any cross-browser compatible way to detect a pinch-zoom in Javascript?

@ZhaofengWu

This comment has been minimized.

ZhaofengWu commented Sep 22, 2017

Not that I am aware of. Other similar libraries do not seem to have this problem though. E.g. Selectize and Chosen. But it might be a difference in implementation.

@alexweissman alexweissman changed the title from Dropdown Displaced When Zoomed In to Dropdown displaced when using pinch zoom Sep 22, 2017

@alexweissman

This comment has been minimized.

Contributor

alexweissman commented Sep 22, 2017

Yeah, not really sure. Select2 attaches the dropdown to the body (see https://select2.org/dropdown#dropdown-placement), so it's possible that pinch-zoom is doing something to the body element that is causing this problem.

Can you try using dropdownParent to attach to a different container element, and see if the problem persists?

@ZhaofengWu

This comment has been minimized.

ZhaofengWu commented Sep 22, 2017

The problem disappears when I attach the dropdown to a different container. For example, running the following code in the basic example page eliminates the problem:

$('.js-example-basic-single').select2({
  dropdownParent: $('#body-inner')
});
@alexweissman

This comment has been minimized.

Contributor

alexweissman commented Sep 22, 2017

Alright, we can add this to the documentation!

@ZhaofengWu

This comment has been minimized.

ZhaofengWu commented Sep 22, 2017

It seems that it does not work with any arbitrary div that is more specific than body. I am not able to prove this point in the Select2 demo, but I can reproduce it in the Bootstrap theme demo. The problem persists after running:

$("select").first().select2({
    dropdownParent: $(".jumbotron")
})

The dropdown UI becomes weird due to the loss of the theme, but the point still holds.

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