IOS simulator white box on the center of the screen

Ionic Framework Ionic Angular
1

I am making a game with Ionic/Angular. When I serve on the web or any android device there is no problem. But when I tried on the IOS simulator there is a white box on the center of the screen like the image bellow. I tried with multiple simulators (iPhone 8/11/12 pro etc.)

wb
wb468×970 57.7 KB

This box appears on every page and if there is something underneath I can not click. When I inspect with the safari dev tools its not in the code, I can’t click with the aim tool on safari. Currently, I am not able to try with a real device. Does anyone have any idea?
Thanks.
(I am using admob plugin if it is matters)

2

check your app.module, sometimes if you have custom components, the “import” order matters.
If you inspect that element, what does it show? It’s an html element?

3

I didn’t quite understand what you meant by import order but this is my app.module file. I don’t have custom components imported. And when I inspect the element It shows nothing, not an HTML element. When I click on the body the whole screen became blue(like normally when inspecting an element) but the white box stays white its not something in my code.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideFirestore } from '@angular/fire/firestore';
import { getFirestore } from 'firebase/firestore';
import { Device } from '@ionic-native/device/ngx';
import { IonicStorageModule } from '@ionic/storage-angular';
import { Drivers } from '@ionic/storage';
import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';
import { Vibration } from '@awesome-cordova-plugins/vibration/ngx';
import { Purchases } from "@awesome-cordova-plugins/purchases/ngx";


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    IonicStorageModule.forRoot({
      name: 'userData',
      driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB, Drivers.LocalStorage]
    }),
    ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, Device, InAppBrowser, Vibration, Purchases],
  bootstrap: [AppComponent],
})
export class AppModule {

}
4

I created a new ionic app and copied/pasted it step by step to figure out at what point this box appears. It didn’t appear. If you face an issue similar to this try re-create your project.