Capacitor: iOS statusbar design issues

[solojuve1897]

Description of the problem:
iOS statusbar overlaps content. Is it possible to have the statusbar always showing fixed outside of the webview? First I thought that I could have an element at the top in HTML which is visible if the device is iOS but that would be hard to get right since the different iOS-devices have a status bar height of between 20px to 132px. Any suggestions how tackle this design issue?

Affected platform

• [ ] Android
• [x ] iOS
• [ ] electron
• [ ] web

OS of the development machine

• [ ] Windows
• [x ] macOS
• [ ] linux

Other information:

Capacitor version:

node version:

npm version:

CocoaPods version:

Steps to reproduce:

Link to sample project:

[jcesarmobile]

No, it’s not possible without webview resizing that gives more problems than it’s worth. You should design your app taking the safe areas into account
https://webkit.org/blog/7929/designing-websites-for-iphone-x/