Incorrect Status Bar Position on iPad Pro 12.9" Gen 3 Device (New Model)

[cvanem]

The status bar appears in an incorrect location when viewing on an iPad 12.9" Gen 3 physical device (see below screenshot). If used within a simulator, the issue does not occur. This only occurs on the new iPad Pro 12.9" model. I have not tested the 11" iPad Pro Gen3. The issue does not occur on a 2018 iPad or the iPhone XS Max devices
.

[cvanem]

Adding cordova-plugin-splashscreen with a universal image resolved my error.

[joeldhenry]

@cvanem what universal image did you use? this solution wont fix everyones usecase because most apps have specific sided splash screens for each device

[cvanem]

@joeldhenry I just created the default universal png file with my desired splash screen image and added it to my config.xml file like below:

<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashScreenDelay" value="0"/>
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreenDuration" value="0"/>
<preference name="FadeSplashScreen" value="false"/>

[joeldhenry]

@cvanem I will try and see if this solution works for me. Still feels like a hack though, a splash screen provided that fits the ipad pro should be enough. I think this ticket should stay open.

[cvanem]

@joeldhenry I don't entirely disagree. I didn't have time to dig into the code to determine what was actually happening. If the above fixes your issue, it may be worth it to take a look at the source code and see why a single iPad sized image doesn't work.

[joeldhenry]

@cvanem could you please mark this as open (maybe apache/cordova-plugin-statusbar#120 rather than this one) so that we can have some other people look at it? I don't believe your solution is a legitimate answer and more of a hack/workaround. There is no way the height of the statusbar should be determined by the splash screen size...and if it is, it needs to be changed.
Thanks!

[cvanem]

@JoelHenry Curious if the universal image fixed your issue or not? If so, we can e-open this issue. Can you provide a few steps or the settings you are using to reproduce what you are seeing? Unfortunately, I don't have access to a physical iPad Pro anymore, so I am not going to be much use testing it.

[joeldhenry]

@cvanem the universal image fixed my issue as well for the moment. Please repoen the issue. For some reason there seems to be a link between the size of the splash screen image and the location of the status bar. If you provide a universal image it would push to the size of the device, giving an accurate screen height/width. my guess is the ipad 12.9 pro requires additional code to reposition the status bar to the top for the currently supported splash screen sizes.

Steps to Reproduce:

For the ipad pro i am currently providing the two splash screen sizes required by
apple:

   <preference name="StatusBarOverlaysWebView" value="false" />
   <preference name="StatusBarBackgroundColor" value="#000000" />
   <preference name="SplashMaintainAspectRatio" value="true" />
   <splash height="2048" src="res/ios/2732x2048 LS.png" width="2732" />
   <splash height="2732" src="res/ios/2048x2732 PT.png" width="2048" />

and get the same result as in your image.

however if i include the universal splash screen:

<splash src="res/screen/ios/Default@2x~universal~anyany.png" />

it works as expected

[cvanem]

@joeldhenry Ok, I re-opened this, but I am not sure what needs to be done to fix it.

It isn't clear how the images/storyboards are interpreted by the in-app-browser code for positioning the statusbar.

If I understand correctly, your issue implies that the legacy images are not working correctly for the iPad Pro dimensions. Is there a reason why you don't want to use universal storyboard images instead of a legacy images? That is the recommended method going forward as it supports split-screen, slide over, etc. You can specify different universal images for each device class if needed.

[prasads]

@joeldhenry I just created the default universal png file with my desired splash screen image and added it to my config.xml file like below:

<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashScreenDelay" value="0"/>
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreenDuration" value="0"/>
<preference name="FadeSplashScreen" value="false"/>

@joeldhenry I just created the default universal png file with my desired splash screen image and added it to my config.xml file like below:

<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashScreenDelay" value="0"/>
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreenDuration" value="0"/>
<preference name="FadeSplashScreen" value="false"/>

Hi @cvanem ,
After adding universal image my whole Cordova app zoomed out, cab you please help on this.