title: Android Chrome adds extra space to bottom of the page when the address bar is hidden
body: <p>I have the following CSS code:</p>
  
  <pre><code>html {
      min-height: 100%;
      position: relative;
  }
  
  body {
      background-image: url("images/background.png");
      background-repeat: repeat;
      margin: 0 0 64px;
  }
  
  #sticky {
      background-color: black;
      height: 44px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0; 
  }
  
  #test {
      width:50%;
      height: 600px;
      margin:50px auto;
      background-color:white;
      border: 1px solid #000000;
  }
  </code></pre>
  
  <p>And the following HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, user-scalable=no" /&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;title&gt;test&lt;/title&gt;
      &lt;script src="https://code.jquery.com/jquery-latest.min.js"&gt;
      &lt;script&gt;
      $(document).ready(function() {
           $(document).on('click', '#test', function() {
                $('#test').height('300px');
           });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
       &lt;div id="test"&gt;
            &lt;table style="height:600px;"&gt;&lt;/table&gt;
       &lt;/div&gt;
       &lt;div id="sticky"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>1) The element called <code>sticky</code> is a sticky footer</p>
  
  <p>2) The element called <code>test</code> is a div that gets resized on click</p>
  
  <p>If I load the page, scroll till the address bar is hidden, and then click on the <code>test</code> div, the element gets resized and an extra space (equivalent to the height of the address bar) is added below the sticky footer.</p>
  
  <p>Scrolling back to show the address bar causes the page to jump quickly and the extra space gets removed.</p>
  
  <p>I noticed this strange behavior only in Android Chrome (haven't tested other browsers on Android) and I tested on multiple Android devices and even the Android emulator does the same. The issue is not there when tested on iOS simulator and desktop Chrome.</p>
  
  <p>Those 2 screenshots demonstrate the issue:
  <a href="https://i.stack.imgur.com/ofhCT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ofhCT.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/K2ORt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K2ORt.jpg" alt="enter image description here"></a></p>
  
  <p>Is this a well known bug in Android Chrome or is it the expected behavior? Is there a solution for this annoying behavior?</p>