White screen, stops at 'Webview loaded' on iOS iPad Air 2

Capacitor
1

We have had some reports from users, especially on the iPad Air 2 that we get a splash screen and then that disappears, and then just blank white screen.

We reproduced on an emulator.

Debugging shows no logs from even app.component.ts constructor and none from the main page constructor - so none of our actual code is being run.

I’m guessing that this device is too old? but here is the log if thats not right - any ideas?

2025-06-10 13:00:51.584340+0800 App[23050:426517] [PreviewsAgentExecutorLibrary] Looking up debug dylib relative path
2025-06-10 13:00:51.584484+0800 App[23050:426517] [PreviewsAgentExecutorLibrary] Found debug dylib relative path string App.debug.dylib
2025-06-10 13:00:51.584505+0800 App[23050:426517] [PreviewsAgentExecutorLibrary] Looking up debug dylib entry point name
2025-06-10 13:00:51.584533+0800 App[23050:426517] [PreviewsAgentExecutorLibrary] No debug dylib entry point name defined.
2025-06-10 13:00:51.584551+0800 App[23050:426517] [PreviewsAgentExecutorLibrary] Looking up debug dylib install name
2025-06-10 13:00:51.584568+0800 App[23050:426517] [PreviewsAgentExecutorLibrary] Found debug dylib install name string @rpath/App.debug.dylib
2025-06-10 13:00:51.584582+0800 App[23050:426517] [PreviewsAgentExecutorLibrary] Looking for Previews JIT link entry point.
2025-06-10 13:00:51.585363+0800 App[23050:426517] [PreviewsAgentExecutorLibrary] No Previews JIT entry point found.
2025-06-10 13:00:51.585389+0800 App[23050:426517] [PreviewsAgentExecutorLibrary] Gave PreviewsInjection a chance to run and it returned, continuing with debug dylib.
2025-06-10 13:00:51.585411+0800 App[23050:426517] [PreviewsAgentExecutorLibrary] Looking for main entry point.
2025-06-10 13:00:51.585431+0800 App[23050:426517] [PreviewsAgentExecutorLibrary] Opening debug dylib with ‘@rpath/App.debug.dylib’
2025-06-10 13:00:51.597307+0800 App[23050:426517] [PreviewsAgentExecutorLibrary] Debug dylib handle: 0x205a1d320
2025-06-10 13:00:51.597345+0800 App[23050:426517] [PreviewsAgentExecutorLibrary] No entry point found. Checking for alias.
2025-06-10 13:00:51.597372+0800 App[23050:426517] [PreviewsAgentExecutorLibrary] Calling provided entry point.
2025-06-10 13:00:51.693272+0800 App[23050:426752] [[FirebaseMessaging]] 11.12.0 - [FirebaseMessaging][I-FCM001000] FIRMessaging Remote Notifications proxy enabled, will swizzle remote notification receiver handlers. If you’d prefer to manually integrate Firebase Messaging, add “FirebaseAppDelegateProxyEnabled” to your Info.plist, and set it to NO. Follow the instructions at:

to ensure proper integration.
2025-06-10 13:00:51.721865+0800 App[23050:426517] DiskCookieStorage changing policy from 2 to 0, cookie file: file:///Users/user275007/Library/Developer/CoreSimulator/Devices/5CE86201-0819-40DC-B3BB-AD71EC92B175/data/Containers/Data/Application/CAF26975-FD49-4E91-9002-6BAF00AC05A7/Library/Cookies/com.HLHLtd.OmniaFieldScout.binarycookies
2025-06-10 13:00:51.859431+0800 App[23050:426517] [ViewportSizing] maximumViewportInset cannot be larger than frame
2025-06-10 13:00:51.859478+0800 App[23050:426517] [ViewportSizing] minimumViewportInset cannot be larger than frame
2025-06-10 13:00:51.905711+0800 App[23050:426517] KeyboardPlugin: resize mode - native
Loading network plugin
2025-06-10 13:00:51.926332+0800 App[23050:426517] DisableShakeToEdit plugin initialized.
:high_voltage: Warning: isWebDebuggable only functions as intended on iOS 16.4 and above.
:high_voltage: Loading app at capacitor://localhost…
Reachable via WiFi
:high_voltage: [log] - onscript loading complete
:high_voltage: WebView loaded
SplashScreen.hideSplash: SplashScreen was automatically hidden after default timeout. You should call SplashScreen.hide() as soon as your web app is loaded (or increase the timeout). Read more at Splash Screen Capacitor Plugin API | Capacitor Documentation

FYI - this is an application developed over 3 years now and has been used extensively and has not had this white screen issue before.

2

A white screen is usually a JS error. Check DevTools via Safari for any errors.

3

I’m in xcode running on an emulator. The app runs well on iphones and ipads both emulators and real devices. It seems to have an issue on ipad air 2 and some older iphones. I’m looking at the console in xcode where the javascript errors are usually printed.

Like I said it doesn’t actually get to any of my code - it gets to ‘webview loaded’ and goes no further. usually the next line it shows in there is a console.log from the first constructor in app.component.ts

are you saying I can see js errors from inside capacitor using that stuff?

4

Yes, it will be DevTools just like when running your app in a browser but will be for the WebView running on the emulator/physical device.

Usually it is some sort of JS feature that is not supported in the WebView version for that device and you’ll need to use polyfills. Looks like from app.component.ts you are using Angular maybe?

Capacitor supported platforms is here - App Development Support Policy - Capacitor. If you are using Ionic, supported versions are here - Mobile Browser Support to Run Ionic Apps Anywhere.

5

Thanks for your help. From the safari debugging console I get;

Failed to load resource: The file “core.css.map” couldn’t be opened because there is no such file.

Now I have 2 apps - one built more recently on a newer version of ionic/capacitor/angular - I tried that one on the ipad air 2 and it worked - no white screen.

But my older app gives me the white screen. So I updated the older one to;
Ionic 8.6.1
Capacitor 7.0.0
Angular 18.2.13

But I still get that same error - but now a blue screen. The blue is the background color of my page, so some improvement, but still does not get to my constructors at all - I assume due to that missing core.css.map file.

It does seem to exist in node-modules/@ionic/angular.css - but maybe its not being copied in?

Searching google but can’t find anything - anyway to check? Anything obvious I may have missed? took all day to update…

6

A .map file is a Source Map file. It is for debugging purposes and is not required. So, getting a 404 for it isn’t causing your issue.

What version of iOS are these devices running?

7

The emulators are 15.5 and the actual device are 15.8.4 - apparently thats the latest version those devices can be updated to due to hardware restrictions.

Thats the only output on the safari development console, and it comes up in red.

And to be clear, this runs fine on all other devices - iOS and android - without error.

8

I’ve been looking at the difference between the app that works and the one that doesn’t, in terms of the basic files (angular.json, capacitor.config.ts, karma.config.js, tsconfig.json, tsconfig.app.json) and have moved all the changes in the working one, to the non-working where it seems appropriate.

This didn’t fix the problem. But angular.json is quite different so I could not work that one out - this is a difference I saw that might be related(?);

working;
“polyfills”: “src/polyfills.ts”,

non-working;
“polyfills”: [“zone.js”],

but I tried adding the “src/polyfills.ts” to the list, or replacing the zone.js - both fail to compile.

9

Ionic 8 supports iOS 15+ so you should be good there.

Check the Ionic starter code (this are what are used as the base when you start a new Ionic project) to see if your configs are the same.

10

Thanks for the help,

Yes quite a lot of differences in those files - a lot has been changed over the years - hard to know what changes are important.

Lots of libraries used and lots of startup code - I guess it could be in any of that code(?)

I’m working through it now.

11

yeah a few more hours on this and the only thing I can think is its some init on a module I’m using - there are a lot.

at this point, since I know a new app will work, I’m going to start from scratch and slowly add in all the modules until it breaks :frowning:

12

This is driving me crazy. Tried doing console logs - initial page comes up but after that, basically as soon as the stuff starts (I assume this is filled in by angular) then ‘webview loaded’ is displayed and nothing more.

I put all the parts in app.module.ts into a fresh project and that works fine. Not sure if they would have to be run or included in an actual page for the problem to appear;

here is my app.module.ts;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { BrowserModule, HammerModule } 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’;

// API access
import { HttpClient, provideHttpClient, withInterceptorsFromDi } from ‘@angular/common/http’;

// translation
import { TranslateModule, TranslateLoader} from ‘@ngx-translate/core’;
import { TranslateHttpLoader} from ‘@ngx-translate/http-loader’;

// storage
import { IonicStorageModule } from ‘@ionic/storage-angular’;

// Import ng-circle-progress
import { NgCircleProgressModule } from ‘ng-circle-progress’;

// Import shared components
import { GlobalErrorHandler } from ‘./GlobalErrorHandler’;

// autocomplete
import {AutocompleteLibModule} from ‘angular-ng-autocomplete’;
import { Geolocation } from ‘@awesome-cordova-plugins/geolocation/ngx’;

import { EmailComposer } from ‘@awesome-cordova-plugins/email-composer/ngx’;
import { SuppressScrollEventDirective } from ‘./directives/suppress-scroll-event.directive’;

import { CUSTOM_ELEMENTS_SCHEMA } from ‘@angular/core’;

console.log(‘mugging in module’);

import ‘hammerjs’;

export function createTranslateLoader(http: HttpClient) {
console.log(‘mugging in module - translate’);
return new TranslateHttpLoader(http, ‘./assets/i18n/’, ‘.json’);
}

@NgModule({ declarations: [AppComponent, SuppressScrollEventDirective],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [BrowserModule, IonicModule.forRoot(), HammerModule, AppRoutingModule,
AutocompleteLibModule, IonicStorageModule.forRoot(),
// Specify ng-circle-progress as an import
NgCircleProgressModule.forRoot({
// set defaults here
radius: 100,
outerStrokeWidth: 16,
innerStrokeWidth: 8,
outerStrokeColor: “#78C000”,
innerStrokeColor: “#C7E596”,
animationDuration: 300,
titleFontSize: “86”,
subtitleFontSize: “16”,
}),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})], providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, Geolocation, {
provide: ErrorHandler,
useClass: GlobalErrorHandler
}, EmailComposer, provideHttpClient(withInterceptorsFromDi())] })
export class AppModule {}

Now I will continue and try to include all the code from my original app and see what breaks :frowning:

13

I only have 1 html file in this app - 1 page. I just removed the entire contents of it and the .ts file so its only a constructor with a console.log - and it still fails in the same place.

so it seems like something outside my code, in ionic or angular or capacitor…

I might have to rebuild the whole app from scratch.

14

ok - I can’t see anymore differences in the startup code :frowning:

I deleted the node-modules and package-lock.json and ran npm install. still broke but the only error ‘missing core.css.map’ is gone now…so there is just no logs at all.

so now I’m back rebuilding from scratch…

15

ok - so exhausted.

I have an actual error now.

Added in all the code failed to work again. The issue seems to be in the constructor of the main page. As soon as I inject services it fails. (on some services)

it has this error;
[error] - ERROR {“name”:“NullInjectorError”,“ngTempTokenPath”:null,“ngTokenPath”:[“t”,“t”,“Xt”,“Xt”]}

constructor(private animationCtrl: AnimationController, private popoverController: PopoverController, private translate: TranslateService)

I have a lot of services, so I was adding them one at a time - the first 2 above work, but when I add the TranslateService it fails again and gives that error. (I tried some of my own services, and same problem)

16

I have managed to start to fix the problems. They all seem to be variations on the same issue. NullInjectError errors on some core angular libraries.

the latest is;
import { HttpClient, HttpEvent, HttpEventType, HttpHandler, HttpHeaders, HttpInterceptor, HttpRequest } from ‘@angular/common/http’;

to be clear - these all work fine on later iPhones and iPads, but specifically the iPad Air 2 fails them.

Maybe these are old libs? not updated?

I also found the same issue with; @ngx-translate/core

17

Solved!

For anyone else who gets caught here - the main problem was I was using the ionic preferences system - @ionic/storage-angular - which seems to have been discontinued.

I had to write my own replacement using the file system directly.

Also several other libraries had to be at the right versions, which had fixes for these older devices (I guess - anyway updating them fixed the issue)

The hardest thing was tracking down the problem due to unclear or no error messages. It was to do with the service injections into the constructor in the end.

Thanks for your help getting me started.

1 Like
18

Interesting! I do see several issues in the repo around Angular. I am using that package in a Vue app still without any issues.

19

its when I inject ‘Storage’ from;
import { Storage } from ‘@ionic/storage-angular’;

that it crashes - remember only on an iPad Air 2 emulator (and device) which runs iOS 15.5 (and I think devices running that level iOS). all the other iPads and iPhones and android have not had any issue with the same code.

This is the latest Ionic/Capacitor at least. (fresh app has this issue)