How to resolve white screen on ionic application (ios) - ios

Question

My app shows a white screen on the device but it correctly runs in the browser and emulator. I have tried a lot of solutions, but none have worked for me. I also use the ionic run ios -l -c command to see errors on the console log but it didn't show any errors.
Does anyone have any suggestions on how I could debug this issue?

Answer 1

IOS is deprecated the UIWebview in the latest version of the IOS.
Install the WKWebview plugin in ionic project using the following commnad
cordova-plugin-ionic-webview
Remove ios platform from ionic project using below command
ionic cordova platform rm ios
Open config.xml file of the ionic project and place the below line of code inside ios platform ( )
After steap you config.xml file code look like
<platform name="ios">
<preference name="WKWebViewOnly" value="true" />
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
Add Readd ios platform
ionic cordova platform add ios

Answer 2

I also faced same issue:
but you can replace your html page contents by <ion-content> with <ion-scroll>.. and also set overflow-scroll="false"
Another thing is check in your config.xml file that all this values are set
<preference name="SplashScreenDelay" value="2000"/>
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="SplashScreen" value="screen"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="AutoHideSplashScreen" value="false" />
and also change in app.js file by adding this line
$ionicConfigProvider.views.swipeBackEnabled(false);

Answer 3

I faced a similar issue recently. Can you try performing a clean installation after deleting node_modules, platforms and plugins directories.
If it didn't work update your app.component.ts like this.
import { SplashScreen } from '#ionic-native/splash-screen';
export class MyApp {
...
constructor(... public splashScreen: SplashScreen, ...) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
...
setTimeout(() => {
this.splashScreen.hide();
}, 2000);
...
});
}
In your config.xml set this perference.
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="ShowSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="FadeSplashScreen" value="false" />