[IE9] [jQuery: 3.1.0] dropdown position bug after scroll

[DragorWW]

Steps to reproduce the issue

1. Open IE9, go to http://codepen.io/DragorWW/full/LRJOBR/
2. Click on firts select
3. scroll page down

Expected behavior and actual behavior

When I follow those steps, I see dropdown panel runs upward.

I was expecting dropdown panel save position under select.

Environment

Browsers: Internet Explorer 9

Operating System: Window 7

Libraries

• jQuery: 3.1.0
• Select2: 4.0.3

Isolating the problem

• example bug

[dnlprplt]

Hello,

I was going to create a new issue, but I stumbled upon this one. I have the exact same problem under IE10 - WIN7. And it seems to be related to JQuery 3. Using JQuery 2.2.4 "fixes" the issue.

Can we expect it will be fixed using JQuery 3?

Following is the report I was going to file:

Prerequisites

• [] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of Select2 (sorry didn't test this)
• This is not a usage question (Those should be directed to the community)
• I have attempted to find the simplest possible steps to reproduce the issue
• I have included a failing test as a pull request (Optional)

Steps to reproduce the issue

See https://jsfiddle.net/bmz7gm0t/ under IE10

(you'll have to scroll down a bit to find the select input)

Expected behavior and actual behavior

When I follow those steps, I see...

Here is a screenshot of the result. The dropdown is misplaced, way above the input.

Note that this only happens when scrolling down. If the input is place at the top of the page and doesn't require you to scroll, then the dropdown is placed correctly.

I was expecting...

The dropdown should be "attached" to the input.

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer 10

Operating System

• Windows 7
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version: 3.1.1
• Select2 version: 4.0.3

[artursopelnik]

+1

[leesherwood]

Getting the same issue here too.

As a workaround until it is fixed, you can listen for the open event and move the dropdown.

.on('select2:open', function(){
        var c = $(this).data('select2').$container,
            cp = c.offset(),
            ch = c.outerHeight(),
            t = cp.top + ch,
            dd = $(this).data('select2').$dropdown;

        setTimeout(function(){ dd.css('top', t+'px'); }, 0);
    });

It sometimes might cause a flicker where the plugin sets the position, then this fix fires. For me this wasn't an issue as the dropdown was always being positioned above the window so the flicker was hidden.

Here's this fix applied to the example fiddle:
https://jsfiddle.net/t96tb3qh/2/

[gavb17]

Have come across this issue and 2 things we tried:

body { position: relative; }

or load in jQuery migrate - https://www.npmjs.com/package/jquery-migrate

[alexweissman]

This issue could potentially be related to #4614.

[alexweissman]

Appears to be a duplicate of #4614, and not limited to IE.