reposition autocomplete .pac.container on mobile window resize

Question

I've spent a day trying to solve a problem. When a user zooms in on a page, the google places autocomplete .pac-container is no longer displayed under the corresponding input field. I have spent a day testing and the thing I found was this from Google: https://code.google.com/p/gmaps-api-issues/issues/detail?id=3416.

Let me explain in more detail. When I load a page with an initial scale of 1 on the viewport, and click on the search input field, the autocomplete suggestion box drops down exactly where it should. However, when I zoom in or out on that page on a mobile device, the .pac-container loses its position:

As you can see, the container is now gapped below the input field. I have tried a bunch of stuff, such as clearing the style of the .pac-container when the input field has focus. Nothing works. Does anyone have a solution?

Answer 1

I have just managed to fix this issue in my use case by simply adding 'height: auto' to the body css. Fixed the problem and now the .pac-container positions exactly where the input is required.