title: Virtual keyboard changes my page height
body: <p>I'm developing a web app for mobile phones and i got a strange problem.
  I have a simple page with a background image and an input field centered in the middle of the page.
  The problem is whenever i click the input box and the virtual keyboard comes up, the background image and input field dimensions are recalculated according to the remaining page space.</p>
  
  <p>The desired behavior is that the whole page will be pushed up.</p>
  
  <p>relevant code (i'm developing with react, hence the weird names)</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1"&gt;
      &lt;style type="text/css"&gt;.location_input__LocationInputStyle___2cLQ9 {
          position: absolute;
          width: 85%;
          height: 10%;
          top: 45%;
          left: 50%;
          transform: translate(-50%);
          background-color: transparent;
          border-radius: 50px;
          border: 3px solid #ffffff;
          text-align: center;
          font-size: 22px;
          color: #ffffff;
  
      }
      &lt;/style&gt;
      &lt;style type="text/css"&gt;.home_page_container__HomePageStyle___2f5vW {
          position: relative;
          width: 100%;
          height: 100%;
          background-image: url(86349e48855062e70072f79443fe0af6.jpg);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: 40% 0;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="app"&gt;
      &lt;div class="home_page_container__HomePageStyle___2f5vW"&gt;
          &lt;input type="text" class="location_input__LocationInputStyle___2cLQ9" placeholder="Address"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Related Images:</p>
  
  <p><a href="https://i.stack.imgur.com/9qdsJ.jpg" rel="nofollow noreferrer">The problem, when keyboard pops up</a></p>
  
  <p><a href="https://i.stack.imgur.com/XS2vl.jpg" rel="nofollow noreferrer">Desired result</a></p>
  
  <p>P.S: after playing with the debugger a bit, i found out that if i set the height of my app container/body/html to a fixed pixel height it doesn't happen.
  Yet it's not a good solution, because i want the height to be 100% of the viewport (so it will be compatible with all devices).</p>
  
  <p>How do i fix it properly?</p>