iOS 7 Safari Landscape Layout Discrepancy: innerHeight vs. outerHeight

In iOS 7 Safari for iPad, a peculiar issue arises with web apps that utilize 100% height. The window.innerHeight (672px) and window.outerHeight (692px) values diverge solely in landscape mode. This discrepancy results in an extra 20px of unused space, affecting the layout of navigation elements and absolutely positioned elements at the screen's bottom.

To mitigate this problem until Apple addresses it, developers have resorted to workarounds. One approach involved absolutely positioning the body in iOS 7, effectively shifting the 20px gap to the page's top instead of the bottom. However, a more effective solution has emerged.

By setting the body's positioning to fixed, the issue can be circumvented:

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

To identify iPad devices running iOS 7, the following script can be employed:

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

By implementing this workaround, developers can ensure proper layout behavior in iOS 7 Safari for iPad, eliminating the troublesome height discrepancy and its impact on navigation and positioning.