title: Unwanted padding at bottom of page when input focussed on mobile safari
body: <p>I'm working with textareas on mobile safari and when a textarea is focussed the viewport seems to add padding underneath the document. When inspecting and selecting the area, it doesn't resolve to an element, or even the html node.</p>
  
  <p>It doesn't seem to matter where the textarea is on the screen or whether or not it is absolutely position, the padding is always present when its focussed. You sometimes have to scroll down to make it visible, but ideally it shouldn't be possible to make it visible at all.</p>
  
  <p>I've added an example with screenshots and code below. There is a cover that is 100% width and height to show where the regular bounds of the document are and the textarea is absolutely positioned at the bottom of the body.</p>
  
  <p>Unfocussed:
  <a href="https://i.stack.imgur.com/UX8Aj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UX8Aj.png" alt="Unfocussed"></a></p>
  
  <p>Focussed (with arrow pointing to unwanted padding):
  <a href="https://i.stack.imgur.com/mpWft.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mpWft.png" alt="enter image description here"></a></p>
  
  <p>Code: 
  </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="user-scalable=no, width=device-width" /&gt;
      &lt;style&gt;
        html{
          background-color: gray;
        }
  
        body{
          width: 100%;
          margin: 0px;
        }
  
        #cover{
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          display: block;
          background-color: green;
        }
  
        #textarea{
          position: absolute;
          bottom: 0px;
          left: 0px;
          width: 100%;
          height: 100px;
          display: block;
          margin: 0px;
          font-size: 18px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="cover"&gt;Cover&lt;/div&gt;
      &lt;textarea id="textarea"&gt;&lt;/textarea&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'd appreciate any insights people have. Thanks.</p>