Ionic 3: Keyboard Scroll issue hide my header in iOS

[ionitron-bot[bot]]

Original issue by @Vivek2s on 2018-10-24T10:08:11Z

Bug Report

Ionic Info ionic": "3.20.0",

1. I'm making a chat app, there is scroll problem which I'm facing in iOS only. When I click on text-area, it scroll the content & header too. After following stackoverflow, use this.keyboard.disableScroll(true);

After keyboard scroll disable, my header is in correct position but now the text-area is hidden & my message too.

Facing the same problem:https://stackoverflow.com/questions/36706398/in-ionic-2-how-to-float-an-element-above-the-keyboard-when-the-keyboard-shows/38786672#38786672

My html:

<ion-header class="chat-outer-section">
  <ion-navbar>
    <ion-title>
      <div class="profil-logo1">
        <img alt="image" [src]="assets/img/user.jpg " class="profile-logo">
      </div>
      <div class="advisor-name-university">
        <div class="chat-candidates">Advisor</div>
      </div>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="chat-window-sec-outer">
  <div class="messages-chats-outers">
    <div class="messages-chat-sub-inner">
       <div class="chat-inners-section">
        <div class="chat-body message-outer-sec" id="style-2">
          <button ion-button icon-end [disabled]="previousChat" (click)="onUp()" class="back-messages">Previous
            Messages
            <ion-icon name="refresh"></ion-icon>
          </button>
          <chat-message *ngFor="let message of messages | async" [message]="message">
          </chat-message>
        </div>
        <div class="bottom custom-send-messages">
          <div class="chat-inner-secss">
            <textarea type="text" class="input-text" #input placeholder="Type your message here..." (keydown.enter)="onEnter($event,input)"
              [(ngModel)]="draftMessage.text" (click)="scrollInput()">
                  </textarea>
            <span class="send-files">
              <img src="assets/imgs/send-files.png" class="send-fls" (click)="pickDoc()" />
            </span>
            <span class="send-messgae">
              <img src="assets/imgs/send-message.png" class="send-mess" (click)="onEnter($event,input)" />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</ion-content>

[klebercode]

If you use the plugin: https://github.com/ionic-team/cordova-plugin-ionic-keyboard

You should also install: https://ionicframework.com/docs/v3/wkwebview/

This solution worked for me.