title: Cordova/Phonegap 3.4.0 iOS 7.1 - Keyboard / Web View issue
body: <p>I've been struggling with this issue for over a week now and would really appreciate any help I can get. I'll explain the issue as I understand it but please correct if I say anything incorrect.</p>
  
  <p>In iOS 7.0.x, when the keyboard became revealed, the web view was resized so that the area that the keyboard took was not considered part of the viewport window size. Up until 7.0, the Cordova Keyboard plugin handled this web view resizing. Since 7.0 natively handled the keyboard reveal in the desired way, the Keyboard <code>shrinkView</code> option for the <code>config.xml</code> file became a "No-op" as of this commit:</p>
  
  <p><a href="https://github.com/apache/cordova-plugins/commit/20215013bf91b659b73d5f428ae91dd58be1273a">https://github.com/apache/cordova-plugins/commit/20215013bf91b659b73d5f428ae91dd58be1273a</a></p>
  
  <p>However, in 7.1, the area the keyboard occupies comes up over the web view. This has a painful side-effect. Say you want to prepend a <code>&lt;div&gt;</code> to the body with a textarea area (like leaving a comment or chat reply), ie;</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="app"&gt;...&lt;/div&gt;
    &lt;div id="reply"&gt;
      &lt;textarea&gt;&lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>example CSS:</p>
  
  <pre><code>body {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
  }
  #reply {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  </code></pre>
  
  <p>Whenever you focus or input into the textarea, the web view will natively re-center the input field. Since the web view still takes the entire height of the screen into account, the div will not stay fixed to the bottom and thus breaks the layout.</p>
  
  <p>I've tried the following things:</p>
  
  <ul>
  <li><p>Futzing with the CSS for the body and fixed div. Position fixed/absolute doesn't seem to make a difference. Setting an explicit height to the body does nothing.</p></li>
  <li><p>All possible combinations of meta viewport options. This is what I'm currently using:</p></li>
  </ul>
  
  <p><code>&lt;meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, minimal-ui" /&gt;</code></p>
  
  <ul>
  <li><p>Uncommenting the "No-op" in the cordova keyboard plugin. This still breaks the layout as it did in iOS 7.0.x.</p></li>
  <li><p>Having JS event listeners on the <code>input</code> and <code>focus</code> events to keep calculating the bottom offset to keep the div at the bottom. This is very jumpy because its battling the native web view behavior of centering the input field.</p></li>
  <li><p>Altering the meta tag to set an explicit height after the keyboard is shown/hidden.</p></li>
  </ul>
  
  <p>I'm using Cordova 3.4.0-0.1.3</p>
  
  <p>Has anyone else experienced this issue? Any solutions or ideas?</p>