Prevent keyboard pushing view in Ionic and MKWebVIew in iOS

Ionic Framework ionic-v3
1

Hi all, I’m using Ionic 3 and MKWebView. I want to achieve a search screen that overlay current screen, auto focus on the input, and show the keyboard.
However every time the keyboard shows up, it push the view upward. This is the video of it: youtube

Those are my code:
HTML:

<ion-content padding fullscreen overflow-scroll=”true” [ngClass]="{'blur': showSearchScreen}" #body>
</ion-content>

<div *ngIf="showSearchScreen" class="overlay">
    <div class="search-box-wrapper">
        <ion-input type="text" [(ngModel)]="searchText" class="search-box" placeholder="Type search term" #searchInput [focus]="searchInput">
        </ion-input>
    </div>
</div>

.ts:

    @ViewChild('searchInput') searchInput ;

And the auto focus directive:

@Directive({
    selector: '[focus]' // Attribute selector
})

export class FocusDirective {

    @Input() focus: any;

    constructor(){
    }

    ngAfterViewInit(){
        this.focus.setFocus();
    }
}

config.xml

    <preference name="KeyboardDisplayRequiresUserAction" value="false" />

I tried some solutions but none worked for me. Any suggestion is highly appreciated. Thank in advance.

2

Any updates on this issue? I have the exact same problem

3

What is “MKWebView”?

4

I think he means WKWebView

5

It may be related to
https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/4

However I cannot solve by any of the proposed solutions