Autocomplete floating when scrolling up on iOS device

[mkok1019]

Just test https://kraaden.github.io/autocomplete/ on iPhone.

When you scroll up, autocomplete overlaps the input and goes up to the screen.

[nithinstany]

Any solution for this issue to fix.

[jackkinsella]

The modification 3b63321 caused this to break severely on iPhone.

When the page is unscrolled:

When I scroll, now the autocomplete box for "Postleitzahl" appears about 100px below and overlaps with the street input:

Undoing this change fixes the issue.

[kraaden]

@jackkinsella Thank you for reporting the issue. Do you have any page where I can reproduce it? I tested the following page on iPhone 6 as well on Browserstack using 2 newest iPhones, but everything seems to work just fine:
https://kraaden.github.io/autocomplete/

If possible, let me know which iOS version you used.

[jackkinsella]

I created a CodePen to demonstrate: https://codepen.io/jackkinsella/pen/jOOxEdq

(It uses your library code except a change where I force IOS mode. You can then inspect with DevTools iPhone simulation)

The autocomplete is in the correct position before any scrolling happens (i.e. the first input is perfect), but after scrolling occurs (i.e. the second input), the autocomplete popup's position seems to be set to a top value that is larger than the viewable screen's height (i.e. which isn't going to play well with position:fixed). This happens because of the addition of window.pageYOffset, which is equal to the amount scrolled.

iOS version? Not sure, sorry (was a colleague's phone). I think it was the one before the X. But the issue can be reproduced in Chrome DevTools.

[rikjacobs1390]

I can also reproduce this bug on iPad (iOs 13.2). Exactly the same bug as jackkinsella describes. It' fine when the page is unscrolled. When scrolled (either by hand or triggered by the appearing of the iOs keyboard) the position of the dropdown in incorrect.