Question on iOS Build

I completed the first iOS build and loaded on an iOS device and everything went pretty smooth.
The only difference from my PhoneGap build is that the footer is now white instead of black and stands out. I’m trying to get it black again. Any ideas? The header is still black which is correct.

I have the following in my index.html file:

meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, height=device-height, width=device-width" 

And the following in the Config.xml

<feature name="StatusBar"
      <param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarStyle" value="blacktranslucent" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarDefaultScrollToTop" value="false" />

How is the footer generated? Can you add a screenshot?

Here is the white footer from the VoltBuilder build

Here is the black footer from the PhoneGap build

blackfooter

I’m sure it might be a setting somewhere that is being interpreted or defaulted differently?

Is there any chance the area is actually part of your app?

Not that I can tell. It is this line that I believe let’s the header and footer show. I think if this is set to true then there is no header / footer and the app covers up to the top and bottom of the screen.

Also, this only occurs on iPhones with the “notch” - iPhone X and XR, etc. On the iPhone 8 there is no footer and the nav bar is at the bottom and looks correct.

Here an interesting article on this:
https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493

Also, from StackOverflow:
“If you have installed this plugin cordova-plugin-webviewcolor, you can use this function window.plugins.webviewcolor.change('#000000'); after deviceready that change the webview color.”

Hey thanks! This did the trick - cordova-plugin-webviewcolor