Dropdown displaced when using pinch zoom

[ZhaofengWu]

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.

[ZhaofengWu]

Looks similar to #4058, but are actually different.

[alexweissman]

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:

[ZhaofengWu]

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]

Reproducible in Safari 11.0 (12604.1.38.1.7) as well.

[alexweissman]

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]

Hmm, but why the displacement in Safari?

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

[alexweissman]

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]

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]

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]

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')
});