Empty space on the bottom of the page when swipe up on safari ios

saomi :

I have a web page that occupy all the viewport of the browser. When I focus on a input the keyboard opens and if I swipe up the web page there is an extra empty space on the bottom even after the bouce effect. This only occurs on safari ios. Android browsers devices seem fine.

I tried to adding

html, body, .main-container {
width: 100vw;
height: 100vh;
overflow: hidden; 
}

But no success. It seems that an extra scroll bar is appended to global page.

We can see a similar "issue" in wikipedia.org main page. If you focus on the search input and scroll to the bottom (still with the focus on the search input) and then swipe up you can see an extra empty space was created under the last link - "Privacy Policy"

Once you close the keyboard the empty space is vanished.

Does anyone know how to solve this little (but annoying) bug?

Thanks

P.S.: I am on windows so it's not so easy to debug

duhok :

This is normal in safari browser. try to open any web page and scroll up you will see the extra white space at the bottom of the page. once you up your hand from the screen everything will return as default.

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=398621&siteId=1