title: Iphone safari not resizing viewport on keyboard open
body: <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>