Why this happens
I have a video showing this behavior.
In most web apps you are making some checks on display size and rotation to place all the elements correctly on screen. If iPhone is in landscape mode you probably need to reduce the size of your main central content area, or maybe you need to change the location of a footer bar.
All these adjustments are needed but force the document size to be smaller than the browser window. The whole browser window consists of the document size (or the space taken by all elements of your page) AND the space beneath the browser bar. So when you are resizing objects to fit in the visible area of the screen you are actually creating a 44 pixels wide void (the browser bar height) at the bottom of the browser window.
Think of the bottom bar as a layer on top of your page. If you could make it transparent you’d see a grey area which Safari couldn’t understand how to deal with.
How to fix it
Ensure to expand your document size by 44 pixels to the bottom. You could simply add a
padding-bottom:44px to the
body or an element at the bottom of the page with
height:44px or anything that makes your application going beneath the browser bar.
Beneath the browser bar there must be something. If your application ends just above it, the void will suck you.
Of course you’ll also need to find a way to prevent the user to scroll into the exceeding 44px area, but this can be easily done with a
preventDefault() in the
Note: this problem doesn’t arise in full screen mode as there’s no browser bar and the browser window is equal to the application size.