I’m using the latest framework7 version 3.5.2 with Vue in a Cordova app.
I’ve set the html meta tag:
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
When displaying a full size page, although the framework7-root has the proper safe-area-inset-top set for iPhone X, the page inside it does not. Rather, the page will overflow its parent root and take over the entire screen and notch. This issue occurs either with or without a navbar.
Here are some screenshots. Unfortunately, I had to mash them into one screenshot, because this forum won’t let new users upload more than 1 image.
First, here are 3 screenshots without a navbar, highlighting different elements. Perhaps if the page-content had a
margin-top: env(safe-area-inset-top), then it might fix the issue.)
Next, here are 3 screenshots with navbar, which is completely obstructed. In the last screenshot, I manually added a margin-top to show the navbar properly.
Is this a bug, or is the developer expected to manually add these margins? The following docs seem to say that it should be automatic: