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.

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

@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.

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.

Same issue here

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

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

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

@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.

@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)

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

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

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

@Nashuim @RobWouters - bummer....it did not fix either of my issues. Page content is still able to scroll up between the status bar and the floating island.

I found that if I do this in my CSS:

margin-top: calc(evn(safe-area-inset-top) - 12px) ; - it removes the gap and pushes the status bar right up to the floating island. However, I think the space above the status bar is better, I just don't want my content scrolling in it.

so I think I need to add code that detects Notch versus Floating Island and apply different CSS settings accordingly. That being said, I would still like the gap between the status bar and the floating island - but need to find a way of hiding the scroll content above the statusbar.

@rolinger Do you have StatusBarOverlaysWebView set to true?

I do not. I just read up on it...I think I do need to set it to true....yes? Well, i added that preference and set it to true, it didn't change anything.

@rolinger The default value is true. The behaviour you are looking for is when the value is set to false

@Nashuim @RobWouters - I changed the setting to false and YUP! That worked. Wheh...thanks so much!

....so much cleaner! Looks great now.