title: Extra Gap/Buffer Below Body Tag (Nobody Can Solve This)
body: <blockquote>
    <p><strong>UPDATE</strong>: It looks like this is a specific bug on the Safari iOS ONLY. Website when loaded as a web app (save on home) does not display
    the same gap/buffer. You should only be able to solve this.</p>
  </blockquote>
  
  <p><strong>JSBIN - View it on Mobile safari vs other browsers.</strong></p>
  
  <p>Live output: <a href="http://output.jsbin.com/winuta/" rel="noreferrer">http://output.jsbin.com/winuta/</a></p>
  
  <p>JSBin: <a href="http://jsbin.com/winuta/edit?html,js,output" rel="noreferrer">http://jsbin.com/winuta/edit?html,js,output</a></p>
  
  <hr>
  
  <p><strong>Original Post</strong></p>
  
  <p>This is a very basic stripped down version of a text area in a DIV with Fixed to bottom.</p>
  
  <p>I'm using the Flat Bootstrap Admin V3 template, which has to be debugged for a long time since many of the messaging portion is buggy. </p>
  
  <p><strong>My page displays correctly on all browsers except for Mobile Safari which created a buffer/gap between the keyboard and the body when my text field is focus.</strong></p>
  
  <p>I manage to work out most of the bug however when it comes to mobile, i have this problem on <strong>iOS Safari</strong> where when <strong>I focus on the text area</strong>, it creates <strong>extra buffer under the webpage</strong> (I use body max-height at 100VH - Buggy i know, but i already resolved the issue using JS and $(window).innerHeight() which works great), no matter how I do.</p>
  
  <p>I tried adjusting all the different div height including body height to minus another 60px away using JS and it still leaves the gap. All other browsers it will stick to right above the keyboard, but not iOS safari. </p>
  
  <p>Any one can shed some light?</p>
  
  <p>The text area code</p>
  
  <pre><code>&lt;div class="footer"&gt;
            &lt;div class="message-box"&gt;
              &lt;textarea id="draftmsg" placeholder="type something..." class="form-control"&gt;&lt;/textarea&gt;
              &lt;button id="sendmsg" class="btn btn-default"&gt;&lt;i class="fa fa-paper-plane" aria-hidden="true"&gt;&lt;/i&gt;&lt;span&gt;Send&lt;/span&gt;&lt;/button&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>This template is base mostly on flex but for the footer i using</p>
  
  <pre><code>.footer {
  position: relative; /*Relative to the text display area which occupies whole viewport minus footer*/
  bottom: 0;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/s536h.png" rel="noreferrer"><img src="https://i.stack.imgur.com/s536h.png" alt="This is how the chat window looks across all browser including iOS Chrome and Firefox"></a></p>
  
  <blockquote>
    <p>Above image shows how it should look normally without keyboard and
    user cannot scroll past the text area since text area sticks to
    bottom.</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/bySsh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bySsh.png" alt="On iOS Safari it creates a gap between the text area and the keyboard"></a></p>
  
  <blockquote>
    <p>but the image shows the gap between keyboard and text area in mobile
    safari</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/UucNG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UucNG.png" alt="on iOS Chrome and Firefox it appears as intended without the extra gap"></a></p>
  
  <blockquote>
    <p>Above image shows other mobile browsers Chrome and Firefox displays
    fine without the extra buffer.</p>
  </blockquote>
  
  <p>UPDATES (Answers to questions from comments)</p>
  
  <p>My meta header has already set as follow</p>
  
  <pre><code>&lt;meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/&gt;   
  &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;   
  &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
  </code></pre>
  
  <p>Complete CSS for footer</p>
  
  <pre><code>.app-messaging .messaging &gt; .footer {
      width: 100%;
      padding: 8px;
      background-color: #dfe6e8; }
  
  .app-messaging .messaging &gt; .footer .message-box {
      background-color: #FFF;
      border-radius: 2px;
      box-shadow: 0 1px 1px #c8d1d3;
      width: 100%;
      height: 80px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: row;
      flex-direction: row;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -ms-flex-align: start;
      align-items: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      border-top: 1px solid #dfe6e8; }
  .app-messaging .messaging &gt; .footer .message-box textarea, .app-messaging .messaging &gt; .footer .message-box button {
      margin-bottom: 0;
      border: 0;
      height: 100%;
      border-radius: 0; }
  .app-messaging .messaging &gt; .footer .message-box textarea {
      -ms-flex: 1;
      flex: 1; }
  .app-messaging .messaging &gt; .footer .message-box button {
      border-left: 1px solid #dfe6e8;
      color: #29c75f; }
  .app-messaging .messaging &gt; .footer .message-box button .fa {
          margin-right: 1rem; }
  #draftmsg {
      line-height: normal;
      padding-bottom: 0;
      margin-bottom: 0;
  }
  </code></pre>