Ionic Angular app with flickering blank content inside modal when testing on MI PAD 4 device

Question

There is a modal in our login page that user's can interact with to configurate some internal app params.

While some parts of the modal are visible to the user, the modal content that contains the form is unexpectedly blank.

This error only occours in a specific test device, that being a MI PAD 4

There is a config button responsible for calling the modal.

Upon clicking the button we call the ModalController and pass a component in the following manner:

HTML

<ion-buttons slot="end">
    <ion-button ion-button icon-only menuToggle (click)=configModal()><ion-icon
            name="cog"></ion-icon></ion-button>
</ion-buttons>

TS

async configModal() {
        const modal = await this.modalController.create({
            component: ConfigmodalPage
        });

        return await modal.present();
}

After doing that the expected behavior would be the modal to show up with its form fields visible.

Unfortunately that's not the case, as seen in te image below the modal content is blank: default modal error

But if we click on the screen the fields are there: fields

And after interacting with the ion-select present on the page it is possible to show all fields expected behavior

Having spent some time reading multiple posts on the ionic forum and stack overflow we failed to properly determine the reason behind this error.

Any indications in how to solve it would be welcomed.

Project settings:

Ionic:

   Ionic CLI                     : 7.2.0 (/home/joaog/.nvm/versions/node/v16.15.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 4.11.13
   @angular-devkit/build-angular : 0.13.10
   @angular-devkit/schematics    : 7.3.10
   @angular/cli                  : 7.3.10
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 12.0.0 ([email protected])
   Cordova Platforms : android 12.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 16 other plugins)

Utility:

   cordova-res                          : 0.15.4
   native-run (update available: 2.0.0) : 1.7.2

System:

   Android SDK Tools : 26.1.1 (/home/joaog/Android/Sdk)
   NodeJS            : v16.15.1 (/home/joaog/.nvm/versions/node/v16.15.1/bin/node)
   npm               : 8.11.0
   OS                : Linux 4.15

Html of the modal content:

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>Configuração de Acesso</ion-title>

        <ion-buttons slot="end">
            <ion-button ion-button icon-only menuToggle (click)=dropBase()>
                <ion-icon name="logo-dropbox"></ion-icon>
            </ion-button>
            <ion-button ion-button icon-only menuToggle (click)=closeConfigModal()><ion-icon
                    name="close"></ion-icon></ion-button>
        </ion-buttons>

    </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
    <ion-list>
        <ion-item>
            <ion-label color="primary" position="stacked">Acesso Interno</ion-label>
            <ion-input [(ngModel)]="ipInterno" type="text" placeholder="IP Interno" clearInput></ion-input>
        </ion-item>
        <ion-item>
            <ion-label color="primary" position="stacked">Acesso Externo</ion-label>
            <ion-input [(ngModel)]="ipExterno" type="text" placeholder="IP Externo" clearInput></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>Tipo</ion-label>
            <ion-select value="1" okText="Ok" [(ngModel)]="tipo">
                <ion-select-option value="1">Matrizes</ion-select-option>
                <ion-select-option value="2">Avós</ion-select-option>
            </ion-select>
        </ion-item>
    </ion-list>
</ion-content>

<ion-footer>
    <ion-toolbar>
        <ion-button expand="full" color="primary" fill="solid" (click)=gravarConfig()>Salvar Dados</ion-button>
    </ion-toolbar>
</ion-footer>