In a web application that I am working on, I tried out iOS 7.1's new minimal-ui feature (see safari fullscreen in iOS 7.1 with minimal-ui meta tag), but I am seeing an issue where an 84px-high gray area appears at the bottom when I switch from portrait to landscape. Also, document.body.scrollTop changes to 64 after switching to landscape.
You can see the issue using this "Hello World" web app: http://www.creativepulse.gr/media/blog/2014/20140123-hello-world/example.html
When I load the app in Mobile Safari on iOS 7.1 iPhone Retina Simulator, everything is fine in portrait mode. However, switching to landscape, the gray area immediately appears.
What is a good way to fix this issue?
Scrolling to the top after the page has rendered helped me. It somehow causes a rerendering and the grey box disappears, however I can't explain what exactly Safari does internally:
window.scrollTo(0, 0);