iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue

Question

We're seeing issues with a web app that has a height of 100% on Safari in iOS 7. It appears that the window.innerHeight (672px) doesn't match window.outerHeight (692px), but only in landscape mode. What ends up happening is that in an app with 100% height on the body, you get 20px of extra space. This means that when a user swipes up on our app, the navigation elements get pulled behind the browser chrome. It also means that any absolutely positioned elements that are at the bottom of the screen end up being 20px off.

This issue was also outlined in this question here: IOS 7 - css - html height - 100% = 692px

And can be seen in this ambiguous screenshot:

What we're trying to do is hack around this so that until Apple fixes the bug, we don't have to worry about it.

One way of doing this is to absolutely position the body only in iOS 7, but this pretty much puts the extra 20px at the top of the page instead of the bottom:

body {     position: absolute;     bottom: 0;     height: 672px !important; } 

Any help with forcing outerHeight to match innerHeight, or hacking around it so that our users can't see this issue would be much appreciated.

Answer 1

In my case, the solution was to change positioning to fixed:

@media (orientation:landscape) {     html.ipad.ios7 > body {         position: fixed;         bottom: 0;         width:100%;         height: 672px !important;     } } 

I also used a script to detect iPad with iOS 7:

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {     $('html').addClass('ipad ios7'); }