title: Mobile keyboard pushes up content because of an absolutely positioned drawer
body: <p>I'm making a website with 3 drawers - elements that are absolutely positioned off screen, one on the left, one on the right and one on the bottom. </p>
  
  <p>Have a look at the website here to see what I'm talking about 
  <a href="https://sjbuysse.github.io/javascriting/index.html" rel="noreferrer">https://sjbuysse.github.io/javascriting/index.html</a></p>
  
  <p>Click on the bottom <code>Pop up!</code> toggle, and you'll see a <code>div</code> with some <code>inputs</code> show up. As usual, when you click on one of these <code>inputs</code> in your mobile browser, a keyboard is displayed, which in result will resize the website. This is no problem on my website when the input high enough on the screen (above the keyboard). But if I didn't scroll down as much, and the keyboard pops up above the selected <code>input</code> element, my whole website is being pushed up, and some blank space is created under my <code>&lt;html&gt;</code> content. Even after I close the keyboard, that blank space stays there. </p>
  
  <p>I will show you with screenshots what I mean:</p>
  
  <p><strong>Situation 1: When the input is high enough to be above the keyboard, no problem.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/ruvhd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ruvhd.png" alt="No Problem when input is above keyboard"></a></p>
  
  <p><strong>Situation 2: When the input is not high enough on the screen, and the keyboard will pop over it, The websites content gets pushed up</strong></p>
  
  <p><a href="https://i.stack.imgur.com/8ys5Ul.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8ys5Ul.png" alt="The websites content is pushed up when input field is under keyboard"></a></p>
  
  <p><strong>The blank space stays in the website even after I hide the keyboard</strong></p>
  
  <p><a href="https://i.stack.imgur.com/JtErOm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JtErOm.png" alt="Blank space persists"></a></p>
  
  <p>After a whole lot of debugging I singled out the cause for this issue: The right-hand drawer on my website (the one you can toggle open with the <code>+</code> sign) somehow is causing this issue by being positioned absolutely. The css for this drawer looks like this:</p>
  
  <pre><code>.create-drawer {
    height: 100vh;
    text-align: left;
    color: #EEE;
    width: 200px;
    background-color: #1C262F;
    position: absolute;
    top: 0;
    transition: transform 0.3s ease-out;
    z-index: 2;
    box-sizing: border-box;
    right: 0;
    transform: translate(200px, 0); 
  }
  </code></pre>
  
  <p>Simply by commenting out the <code>position: absolute</code> line, the problem is fixed. 
  Can someone explain this to me?</p>
  
  <p>Also, The left-hand drawer (with the filter symbol) has the exact same css (except that it's positioned left), and does not interfere with anything. I would also love to understand how that's possible. </p>