iOS version has a transparent statusbar

[jankal13]

Hello together,

I have a Quasar App which seems to have some issues with capacitor/iOS. When I run the iOS version it seems that the statusbar of the app becomes transparent/translucent although I defined it in the plist as "lightcontent/white".
Also it does not matter if the phone has a notch or not. The statusbar always stays transparent. I just can get rid of it if I use "viewport-fit=cover" which I don't want to use as it screws up my app's layout.

Does anybody know why the statusbar is transparent, how I can colour it (e.g. make it white) and what I missed?

Thank you and best regards
JK

[ontwikkelfabriek]

@mrzyte

Did you use the Capacitor status bar plugin?
https://capacitorjs.com/docs/apis/status-bar

Here's the Cordova plugin. I know that one works to create solid non transparent status bars in iOS.
https://cordova.apache.org/docs/en/10.x/reference/cordova-plugin-statusbar/

[jankal13]

Thank you for your answer. I tried the suggested cordova plugin but it still results in a transparent status bar. I guess there is something wrong with the iOS settings in general :( Have you set up some specific settings in your iOS project to make it non transparent?

[ontwikkelfabriek]

@mrzyte

this is my config.xml settings for statusbar inside /src-cordova

<preference name="StatusBarStyle" value="lightcontent" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#F79432" />

and the viewport quirks for IOS:
https://cordova.apache.org/docs/en/10.x/reference/cordova-plugin-statusbar/#ios-quirks