title: Ionic: Keyboard overlaps a focused text input on iOS 11
body: <p><strong>Issue</strong></p>
  
  <p>When I click the text input from the modal, a keyboard overlaps the text input. This issue has found during testing on iPhone SE (iOS 11) device.</p>
  
  <p>I've looked up a several threads and tried to figure out on my own, but I've realized that my current problem has been a chronic issue for Ionic developers until now.</p>
  
  <p><strong>These are the related links to my issue.</strong> I've tried given solutions from links below, but none of them worked with my code.</p>
  
  <ul>
  <li><a href="https://github.com/ionic-team/ionic/issues/11501" rel="noreferrer">Keyboard issue</a></li>
  <li><a href="https://github.com/ionic-team/ionic/issues/7149" rel="noreferrer">Keyboard overlaps the text input when the input is placed inside an ion-footer</a></li>
  <li><a href="https://forum.ionicframework.com/t/keyboard-hides-input-until-i-start-typing/60827/2" rel="noreferrer">Keyboard hides input until I start typing</a></li>
  <li><a href="https://github.com/ionic-team/ionic/issues/10629" rel="noreferrer">Ionic 2 On-Screen Keyboard Covers Focused Input Element Inside Grid Component</a></li>
  </ul>
  
  <p><strong>Version Info</strong></p>
  
  <p>cli packages: (/usr/local/lib/node_modules)</p>
  
  <pre><code>@ionic/cli-utils  : 1.19.0
  ionic (Ionic CLI) : 3.19.0
  </code></pre>
  
  <p>global packages:</p>
  
  <pre><code>cordova (Cordova CLI) : 7.1.0
  </code></pre>
  
  <p>local packages:</p>
  
  <pre><code>@ionic/app-scripts : 3.1.4
  Cordova Platforms  : android 6.3.0 ios 4.5.4
  Ionic Framework    : ionic-angular 3.9.2
  </code></pre>
  
  <p>System:</p>
  
  <pre><code>ios-deploy : 1.9.2
  Node       : v8.9.0
  npm        : 5.5.1
  OS         : macOS High Sierra
  Xcode      : Xcode 9.2 Build version 9C40b
  </code></pre>
  
  <p><strong>Expected behavior</strong></p>
  
  <p>Ion input should stay in a position right above the keyboard while a user types some messages.</p>
  
  <p><strong>Actual behavior</strong></p>
  
  <p><a href="https://i.stack.imgur.com/maRcu.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/maRcu.gif" alt="enter image description here"></a></p>
  
  <p><strong>app.component.ts</strong></p>
  
  <p>I've included <code>keyboard.disableScroll(true);</code> inside <code>platform.ready()</code> to prevent navbar crashing issue. Without this line of code, the keyboard works fine with the input text. But it pushes the whole content to the top including navbar, thus for the first few messages appear to be hidden.</p>
  
  <p>Any ideas?</p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>I'm not sure the way I've solved the issue is the best solution, but for now, I replaced the content and footer's margin-bottom with a sum of an initial height of text area and the keyboard height.</p>
  
  <p><em>If you have a better solution, feel free to leave it as an answer.</em></p>
  
  <p>Here's the final result.</p>
  
  <p><a href="https://i.stack.imgur.com/ufWFt.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/ufWFt.gif" alt="enter image description here"></a></p>