title: input field inside popup is jumping when focused
body: <p>I have a poup with input fields inside. When I use iPhone or iPad to click on any input field the layout jumps... you can see this effect in this link: <a href="https://jsbin.com/zebixifami/1" rel="nofollow">https://jsbin.com/zebixifami/1</a></p>
  
  <p>Try to tap the input fields at the bottom of the popup you will see the jerk, This jerk is much more prominent in actuall product.</p>
  
  <p>Here is the editor bin url: <a href="https://jsbin.com/zebixifami/edit?html,css,output" rel="nofollow">https://jsbin.com/zebixifami/edit?html,css,output</a></p>
  
  <p>Here is a link to the video showing this issue: <a href="https://www.youtube.com/watch?v=LvmAl-HQI8Y&amp;feature=youtu.be" rel="nofollow">https://www.youtube.com/watch?v=LvmAl-HQI8Y&amp;feature=youtu.be</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="content"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?&lt;/p&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?&lt;/p&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?&lt;/p&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?&lt;/p&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?&lt;/p&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="popup"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
    &lt;input type="text"&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.popup {
    position: fixed;
    top: 50%;
    left: 5%;
    width: 90%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    max-height: 90%;
    background: #fff;
    overflow: auto
  }
  
  input {
    width: 90%;
    margin-left: 5%;
    display: block;
    margin-bottom: 20px;
    margin-top: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  body {
    background: #000;
    oveflow: hidden;
  }
  </code></pre>