1

xcode - webview content is showing in status bar

In this post, it hints that to ensure the status bar is not sitting over the webview, ie in capacitorjs's case the app, you should add constraints to the storyboard.

However, in my xcode (latest), the storyboard for capacitor "Bridge view controller" does not allow me to apply constraints.. all the options are greyed out:

enter image description here

However, I cannot figure out how to get the ios status bar to not sit over the top of the app, and all the old Cordova and ionic methods do not appear to be working.

Whatever I do the status bar hand over the webview.. enter image description here

Any ideas or ios/capacitor js pro's out there who could help?

Dobromir Kovachev
  • 284
  • 3
  • 5

2 Answers2

6

Capacitor uses a single ViewController where the only view is a WKWebView that is full screen, so you can't add any constraints to it.

What you should do to avoid the notch is to add this viewport meta tag <meta name='viewport' content='initial-scale=1, viewport-fit=cover'> to your index.html and respect the Safe Areas with the help of env() CSS function and pre-defined environment variables safe-area-inset-left, safe-area-inset-right, safe-area-inset-top and safe-area-inset-bottom as described by Apple on this article

If your app is not going to be scrollable and you don't want to deal with the safe areas yourself, you can alternatively set the viewport meta tag to <meta name='viewport' content='initial-scale=1, viewport-fit=contain'> and add this to the capacitor.config.json

"ios": {
    "contentInset": "always"
}
jcesarmobile
  • 51,328
  • 11
  • 132
  • 176
  • I tried using the config option but it did not change anything - adding the padding the body based on the env but maybe i am missing something. When the user scrolls down the page the text moves behind the status bar. –  Aug 10 '21 at 12:11
  • Here is a demo https://github.com/j-d-carmichael/capacitor-demo –  Aug 10 '21 at 12:11
  • 1
    The config option is for when the app doesn't scroll behind the status bar, but the demo app scrolls behind the status bar, so you can't use that option for that app. In your case I would recommend a fixed "header" that uses the env variables and hides the scrollable content behind it – jcesarmobile Aug 10 '21 at 12:51
  • 1
    ah i see - i assumed capacitorjs would have a more robust and less hack solution –  Aug 11 '21 at 14:47
  • You have to remember that, despite you are using web technologies, you are creating apps, not websites. Do you know any native app where the UI scrolls like in your sample app? the only one I can think of is google maps, and it shows the map behind the status bar. All others use "fixed headers" that adapt to the status bar safe areas and then the scrollable part is behind the header. – jcesarmobile Aug 11 '21 at 18:18
  • 1
    All shopping and listing apps do :). Cordova managed this via a their statusbar and ensured the window of the website did not go under the status bar. It would be much easier if capacitor offered more control over constraining the views in xcode opposed to having to hack it. –  Aug 12 '21 at 09:17
  • Either-way, thanks for the solution, much appreciated. –  Aug 12 '21 at 09:18
1

I'm not familiar with Capacitor, but as an iOS developer a View Controller in not a visual element so it is not capable of having constraints.

You'll need to figure out a way to access the UIView in Capacitor and then apply constraints the the view.

Ryan
  • 46
  • 4
  • ok thanks i will see if i can find this - just to confirm though, this would be the UIView storyboard right? –  Aug 02 '21 at 18:31