Skip to content
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
Closed

Dropdown displaced when using pinch zoom #5048

ZhaofengWu opened this issue Sep 22, 2017 · 13 comments

Comments

@ZhaofengWu
Copy link

@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
Copy link
Author

@ZhaofengWu ZhaofengWu commented Sep 22, 2017

Looks similar to #4058, but are actually different.

@alexweissman
Copy link
Contributor

@alexweissman 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
Copy link
Author

@ZhaofengWu 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
Copy link
Author

@ZhaofengWu ZhaofengWu commented Sep 22, 2017

Reproducible in Safari 11.0 (12604.1.38.1.7) as well.

image

@alexweissman
Copy link
Contributor

@alexweissman 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
Copy link
Author

@ZhaofengWu 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
Copy link
Contributor

@alexweissman 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
Copy link
Author

@ZhaofengWu 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 Dropdown Displaced When Zoomed In Dropdown displaced when using pinch zoom Sep 22, 2017
@alexweissman
Copy link
Contributor

@alexweissman 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
Copy link
Author

@ZhaofengWu 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
Copy link
Contributor

@alexweissman alexweissman commented Sep 22, 2017

Alright, we can add this to the documentation!

@ZhaofengWu
Copy link
Author

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

kevin-brown pushed a commit that referenced this issue Sep 12, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants