iPhone 14 Pro floating island status bar height incorrect

[rayelward]

Bug Report

Problem

iPhone 14 pro has a new status bar with the floating island. Instead of the safe inset being 47 points like with the notch based iPhones, it is now 59 points. See this detailed blog post about the new safe are with the dynamic island: [https://useyourloaf.com/blog/iphone-14-screen-sizes/]

The code just measures the height of the status bar and not the safe zone.

What is expected to happen?

on iOS the webview should be below the safe area inset.

What does actually happen?

the webview is above the safe area inset and it causes all types of issues depending on the UI because touch events on the safe area are sent to the whole html page.

Information

Just use the plugin with StatusBar.overlaysWebView(false); on a iPhone 14 pro

Command or Code

having the overlay be false and on an iPhone 14 pro.

Environment, Platform, Device

iOS, iphone 14 pro, xCode 14.

Version information

cordova cli v 11.0.0
cordova iOS v6.2.0
cordova-plugin-statusbar v4.0.0-dev

Checklist

• I searched for existing GitHub issues
• I updated all Cordova tooling to most recent version
• I included all the necessary information above

[rayelward]

I have a work around / fix at: https://github.com/Konverse-Inc/cordova-plugin-statusbar, you can set up a PR and merge in from there if it meets the requirements, in the mean time we'll need to use that branch for iPhone 14 Pro clients.

[jcesarmobile]

can you provide a sample app? I can't reproduce

[rayelward]

@jcesarmobile you just need a 14 pro device to have it reproduce. This is very easy to reproduce on any app that uses the plugin with that hardware device (not the simulator). You can see the proper calculation done for the frame with the dynamic island in the fork that I shared above.

[jcesarmobile]

I tried and I can't reproduce in my sample app, that's why I'm asking for your sample app.
I don't have a real iPhone 14, but tested on the simulator and the height seems correct.

[FanningHau]

Same issue here

[Nashuim]

This is easy to reproduce but hard to see depending on your styling. When the y origin is set to the height of the statusBarFrame the safe-area-inset-top is self.webView.safeAreaInsets.top - statusBarFrame.size.height when it should actually be 0 since the webView sits under the statusBar and safe area.

With the fix proposed by @rayelward the origin is corrected and the safe area is correctly set to 0 which matches the same behaviour shown in Safari when the StatusBar is shown

[rolinger]

I am seeing this issue within my app on any iPhone with the floating island: Iphone 14 and Phone 15 and I bet its an issue on iPhone 16 too but haven't tested it yet. I see a recent pull request that looks to fix this issue...any chance it will be merged soon? Anyone we can nudge to commit the merge as there are no conflicts with the base. Its ready to go.

@rayelward @Nashuim

[rolinger]

I just realized my statusbar with Floating Island devices has two issues.

1. My content has a small space beneath the StatusBar before my content starts - similar to what others are describing.
2. But also (and the bigger issue), the statusbar is pushed down from the Floating Island itself creating a 10-15pixel gap above the StatusBar, so when I scroll my app page up, my app content appears above the status bar before it scrolls out of view.

Issue #1

Issue #2

[rolinger]

@RobWouters - I know, I was just wondering when someone would do the merge that @Nashuim did on Dec 24, 2024. I think it will fix my #1 issue, but not my #2. I will grab the fork but was hoping to not have to remove and reinstall the master later.

[RobWouters]

@rolinger yes, sorry I misread your comment.

FYI: that fork fixed the issue in your second screenshot for us. (Your first screenshot looks like it might be some padding/margin issue in your HTML, but guessing here)

[rolinger]

ahhhh..I misunderstood then, I thought it was reverse. Cool. Thanks.

[Nashuim]

@rolinger Are you able to test my fix? It should fix the second issue as well

[rolinger]

@Nashuim - just installed it, compiling now....let you know in a moment.