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), b

Answer 1

With reference to the accepted answer, I've also had luck with the following rule:

html.ipad.ios7 {
    position: fixed;
    width: 100%;
    height: 100%;
}

This has the added advantage in that it appears to stop the html element scrolling "under" a fixed body element.

Answer 2

The accepted answer doesn't cope when the favorites bar is showing. Here is am improved catch all fix:

@media (orientation:landscape) {
  html.ipad.ios7 > body {
    position: fixed;
    height: calc(100vh - 20px);
    width:100%;
  }
}

Answer 3

I came across this page for the same issue. There are a lot of useful answers here, and others not (for me).

However, I found a solution, which works in my case, and works totally independent of which OS version and which bug now or in the past or future.

Explaination: Developping a web app (no native app) with several modules of fixed size in fullscreen, with class name "module"

.module {position:absolute; top:0; right:0; bottom:0; left:0;}

which contains a footer with class name "footer"

.module > .footer {position:absolute; right:0; bottom:0; left:0; height:90px;}

Nevermind, if I set the height of the footer later to another height, or even its height is set by its content, I can use this following code for correction:

function res_mod(){
    $('.module').css('bottom', 0); // <-- need to be reset before calculation
    var h = $('.module > .footer').height();
    var w = window.innerHeight;
    var o = $('.module > .footer').offset();
    var d = Math.floor(( w - o.top - h )*( -1 ));
    $('.module').css('bottom',d+'px'); // <--- this makes the correction
}

$(window).on('resize orientationchange', res_mod);

$(document).ready(function(){
    res_mod();
});

Thanks to the skills of Matteo Spinelli I can still use iScroll with no problems, as its change events fortunately are fired after. If not, it would be necessary to recall the iScroll-init again after the correction.

Hope this helps somebody

Answer 4

If I use this:

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

My Safari on Mac shows the same html classes... SO its not working correctly.

I tried to combine a few things - that worked for me, so I can manage it in the browser and without Browser view.

jQuery

if (navigator.userAgent.match(/iPad/i) && (window.orientation) ){
     $('html').addClass('ipad ');
        if (window.innerHeight !=  window.outerHeight ){
          $('html').addClass('browser  landscape');              
    }
    else{
         $('html').addClass('browser portrait');                   
    }
} 

CSS

@media (orientation:landscape) {
   html.ipad.browser > body {
       position: fixed;  
       height: 671px !important;
   }
}

///// With this you are more flexible or other OS and Browsers

Answer 5

what if you try

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

Answer 6

Samuel's answer, as also stated by Terry Thorsen, is working great, but fails in case the webpage has been added to the iOS home.

A more intuitive fix would be to check for window.navigator.standalone var.

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

This way it only applies when opened inside Safari, and not if launched from home.