Issues with headers and Select2 (with search) components on Ipad

Issues with headers and Select2 (with search) components on Ipad

  

I have a page with a Header banner that is anchored at the top of the screen (so it stays when scrolling the page), this page also has some Select2 components that have search functionality.

When testing this page on an Ipad, if I select one of the Select2 components it opens up with the options and the search box, but at the same time the Header banner then appears at the bottom of the page and then quickly moves to the top of the screen.

Why does this occur? Any issues on a solution, or atleast where to start (CSS, Components, JS)? 

It's most likely a problem with Select2.

Perhaps you could add a check if the user is on a mobile device, and if so use another type of input?
Or you might want to fiddle around within the Select2 component.