Items get messy when keyboard is activated

Ionic Framework ionic-v3
1

First of all, I wanted to say that I am new and I don’t know if this topic goes here. In that case, have the corresponding administrator move it, please

According to my console, I am using version 5.2.3 of Ionic (if you need any more information, ask me for it), and I encounter the following problem:

When I find myself developing the app, using the Chrome inspector, everything works without problem. Also, even when I build the Android APK and test it on my Xiaomi Redmi Note 7, everything works fine. Here is a screenshot:

ionic1
ionic1.png1080×2340 75.1 KB

But as soon as I activate the keyboard, all the elements of the screen get messy (except the tabs buttons, which are kept underneath I guess):

ionic2
ionic2.png1080×2340 117 KB

I’ve been looking for solutions, but I can’t find anything to solve this.

Has something similar happened to someone else? Or am I the only one?
Here is the HTML code:

<ion-content>
    <ion-grid style="height: 100%">
        <ion-row justify-content-center align-items-center style="height: 100%; flex-direction: column">
            <div class="imagenPublicar">
                <img src="assets/icons/camara.svg"/>
            </div>
            <ion-chip class="inputPublicar">
                <ion-input class="ion-text-center" placeholder="Nombre del restaurante"></ion-input>
            </ion-chip>
            <ion-chip class="inputPublicar">
                <ion-input class="ion-text-center" placeholder="Precio del menú"></ion-input>
            </ion-chip>
            <ion-chip class="ubicacionPublicar">
                <ion-icon name="pin"></ion-icon>
                <ion-label>¿Dónde está?</ion-label>
            </ion-chip>
            <ion-chip class="hechoPublicar">
                <ion-label>¡Hecho!</ion-label>
            </ion-chip>
        </ion-row>
    </ion-grid>
</ion-content>

Thank you very much to all!