title: Scrolling down and hold on mobile devices shows elements that are located just below viewport
body: <p>I have an element that I wish to show when the user clicks something, emerging from the bottom of the screen. To do that, I have the code here: <a href="https://codepen.io/anon/pen/arNBZa" rel="nofollow noreferrer">CodePen link</a>. Relevant code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementsByClassName('filler')[0].addEventListener('click', e =&gt; {     
    document.getElementById('target').classList.add('targetChanged');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    min-height: 100vh;
  }
  
  .filler { 
    margin: 0 auto;
    width: 200px;
    height: 100px;
    
    background-color: black;
    margin-bottom: 10px;
  }
  
  .locatedBelowViewport {
    position: fixed;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    background-color: red;
    transform: translateY(100%);
    transition: all 1s ease;
  }
  
  .targetChanged {
    transform: translateY(0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class = "filler"&gt;&lt;/div&gt;
    &lt;div class = "filler"&gt;&lt;/div&gt;
    &lt;div class = "filler"&gt;&lt;/div&gt;
    &lt;div class = "filler"&gt;&lt;/div&gt;
    &lt;div class = "filler"&gt;&lt;/div&gt;
    &lt;div class = "filler"&gt;&lt;/div&gt;
    &lt;div class = "filler"&gt;&lt;/div&gt;
    &lt;div class = "filler"&gt;&lt;/div&gt;
    &lt;div class = "filler"&gt;&lt;/div&gt;
    &lt;div class = "filler"&gt;&lt;/div&gt;
    &lt;div class = "filler"&gt;&lt;/div&gt;
    &lt;div class = "filler"&gt;&lt;/div&gt;
    &lt;div class = "filler"&gt;&lt;/div&gt;
    &lt;div class = "filler"&gt;&lt;/div&gt;
    &lt;div id = "target" class = "locatedBelowViewport"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, when you click the first black box in the display, the red <code>&lt;div&gt;</code> comes out. There is nothing wrong when I tried simulating it in CodePen in my mobile device (Android device) as the "toolbar" of my Google Chrome's device does not disappear (for reference, this it the "toolbar" that I am talking about):</p>
  
  <p><a href="https://i.stack.imgur.com/q6bqV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q6bqV.jpg" alt="Toolbar"></a></p>
  
  <p>In my regular static webpage, though, scrolling down causes that to disappear and it leaves a gap on the bottom of my screen (the size of the now vanished "toolbar") and I can see the red <code>&lt;div&gt;</code> there when I scroll <strong>and hold. Only scrolling does not cause this problem.</strong></p>
  
  <p>Is there a way to work around that behaviour that does not involve preventing the "toolbar" from disappearing (I want it to disappear when users scroll down)?</p>