Iphone safari not resizing viewport on keyboard open
<p>Mobile safari doesn't update the window.innerHeight when the keyboard pops up. (at least in 9.3.5, and there are several answers like <a href="https://stackoverflow.com/a/17604856/2423187">this</a> one, with comments saying that broke in ios 8.2) </p>

<p><a href="https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html#//apple_ref/doc/uid/TP40014305-CH11-DontLinkElementID_35" rel="noreferrer">Apple documentation</a> <s>says</s> <a href="https://web.archive.org/web/20160613195513/https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html" rel="noreferrer"> used to say before they edited it</a> that window.innerHeight will be back with iOS 10.</p>

<blockquote>
  <p>In iOS 10, WKWebView objects match Safari’s native behavior by updating their window.innerHeight property when the keyboard is shown, and do not call resize events.</p>
</blockquote>

<p>I need to know what to do in the meantime to deal with the iphone safari just pushing the website out of the view, instead of resizing.</p>

<hr>

<p>I have an application that uses absolute positioning for everything, and has a div with overflow between the header and the footer.</p>

<pre><code>.mainContent {
  position: absolute;
  top: 50px;
  bottom: 28px;
  left: 0;
  right: 0;
}
</code></pre>

<p><a href="http://plnkr.co/edit/kPzXJSYswWnjNljXm0FG?p=preview" rel="noreferrer">Plunker</a> here.</p>

<p>Screenshots, working as expected on android:</p>

<p><a href="https://i.stack.imgur.com/dJKc4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dJKc4.png" width="200" height="356" title="Full height android"></a>
<a href="https://i.stack.imgur.com/yA4Un.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yA4Un.png" width="200" height="356" title="android with keyboard"></a></p>

<p>Not working as expected on iphone:</p>

<p><a href="https://i.stack.imgur.com/usJwn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/usJwn.png" width="200" height="356" title="Full height iphone"></a>
<a href="https://i.stack.imgur.com/sSAFF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sSAFF.png" width="200" height="356" title="iphone with keyboard"></a></p>

<p>Based on <a href="https://stackoverflow.com/a/2601085/2423187">this answer</a> I have a native JS way of determining if the iphone keyboard is open,</p>

<pre><code>    document.getElementById('chat-input').addEventListener('focus', function(){
      if(/iPad|iPhone|iPod/.test(navigator.userAgent) &amp;&amp; !window.MSStream){
        console.log("IOS focus");
        var scroll = window.scrollTop;
        window.scrollTop = 10;
        var keyboard_shown = window.scrollTop &gt; 0;
        window.scrollTop = scroll;

        if(keyboard_shown){
          console.log("keyboard");
        }else{
          console.log("no keyboard");
        } 
      } 
    });
  })();
</code></pre>

<p>But that doesn't actually solve the problem as the <code>window.innerHeight</code> doesn't change, so I don't know how big the keyboard is. I could just make a list of iphone resolutions, and their keyboard heights, and just be a terrible hardcoding person... </p>