Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

iPhone 14 Pro floating island status bar height incorrect #243

Open
3 tasks done
rayelward opened this issue Sep 23, 2022 · 6 comments · May be fixed by #278
Open
3 tasks done

iPhone 14 Pro floating island status bar height incorrect #243

rayelward opened this issue Sep 23, 2022 · 6 comments · May be fixed by #278
Labels
info-needed

Comments

@rayelward
Copy link

rayelward commented Sep 23, 2022 •
edited
Loading

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
Copy link
Author

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
Copy link
Member

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

@rayelward
Copy link
Author

@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
Copy link
Member

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
Copy link

Same issue here

@Nashuim
Copy link

Nashuim commented Dec 10, 2024

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

@Nashuim Nashuim linked a pull request Dec 10, 2024 that will close this issue
Open
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
info-needed
Projects
None yet
Milestone
No milestone
4 participants
@rayelward @jcesarmobile @Nashuim @FanningHau