Ionic/cordova iphone 11 top notch, can't see the wifi, time etc

Ionic Framework
1

I’m not sure what’s happened here, look at the screenshot below, this is a screenshot of an ionic app on iphone 11 at the top notch. You can just see the battery in yellow, but everything has turned white so it can’t be seen on the white background.

enter image description here

I don’t think it’s related but just to be safe, i have the following to push the app outside of the notch and that works

margin-top: constant(safe-area-inset-top) !important;
  margin-top: env(safe-area-inset-top) !important;

Any ideas on why the icons have turned white?

2

You might be facing a status bar color issue. Checkout the capacitor status bar plugin and the setStyle method.

3

I use cordova, but i worked it out anyway, i just added this to my config.xml:

<preference name="StatusBarStyle" value="default" />

Thanks for taking the time to look

1 Like