Ionic modal and content not rendering well

I created a modal component but it only renders the content well when opening it the first time. Subsequent openings the modal does not render the content correctly. The modal’s position is chanded, the header can be hidden, font color is changed, all content can be hidden e.t.c.

I have declared the modal in the module that opens it and added it in entrycomponents.

Can it be a css issue?

I’m using ionic 5.6.5 and angular 11.

module containg the modal component

  declarations: [HomePage, AllordersComponent],
  imports: [
  entryComponents: [AllordersComponent]
export class HomePageModule {}

code for opening modal

async openModal() {
    const modal = await this.modalCtrl.create({
        component: AllordersComponent
      return await modal.present();

code inside the modal component html


  <div id="container">
    <strong>Ready to create an app?</strong>
    <ion-button (click)="dismiss()">Close modal</ion-button>

code for closing the modal

async dismiss() {
    return await this.modalCtrl.dismiss();

on first opening it displays well as shown below.

On subsequent opening the content style is changed as shown below.

Also I noted the rendering problem occurs only on firefox browser.

Any help is appreciated.

1 Like

Mhhh it looks like I have the same issue, on Firefox the UI is sometimes messed up (or parts not showing).
The recent changes where only a NPM update, no CSS of something else.


   Ionic CLI                     : 6.13.1 (c:\xxxxxx\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.6
   @angular-devkit/build-angular : 0.1102.11
   @angular-devkit/schematics    : 11.2.11
   @angular/cli                  : 11.2.11
   @ionic/angular-toolkit        : 3.1.1


   Capacitor CLI   : 3.0.0-rc.0
   @capacitor/core : 3.0.0-rc.0


   Cordova CLI       : not installed
   Cordova Platforms : not available
   Cordova Plugins   : not available


   cordova-res : 0.15.1
   native-run  : 1.3.0


   Android SDK Tools : 26.1.1 (c:\xxxxxx\AppData\Local\Android\sdk)
   NodeJS            : v14.16.0 (C:\Program Files\nodejs\node.exe)
   npm               : 7.11.1
   OS                : Windows 10

In Chrome (or the latest Edge) its working fine.

can u check the developer console and compare the same with edge, chrome to see if any css class are being added/removed

I don’t see anything strange in the dev tools

@Stevemutua Did you end up figuring this one out? I’m getting the same issue where the modal is only rendering the ion-content once. It’s only happening to me when I’m emulating, and the content renders if I rotate the device :confused:
Very confusing