Gray area visible when switching from portrait to landscape using iOS 7.1 minimal-ui

Question

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?

Answer 1

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);

Answer 2

I tried for a while to fix this with no luck. I finally decided to do a test where I:

1. Created a new HTML document with the minimal-ui meta tag.
2. Left the body of the document empty (no HTML tags), and no styles.

Tested this and the issue still occurs.

The only conclusion I could come up with is that this is a bug in IOS 7.1, so I submitted a bug report to Apple. It was reported as BUG #: 16335579.

Note that Mr. kraftwer1's solution worked for me (it's a hack, but will have to do until Apple fixes this). That is, adding... window.scrollTo(0, 0); after orientationChange works.

Finally, I just wanted to also mention that submitting additional bug reports on this issue to Apple will raise it's priority in their queue.