I am familiar with the concept of safe areas. According to the docs, F7 automatically adds the required space in portrait mode to cater to the upper notch and bottom bar on iPhones that have that. This means that the content would never flow behind the notch, right? For some reason, my content always renders behind the notch, no matter what I do (see screenshot below, where the search bar is underneath the iPhone status bar). I am running F7 on capacitor, am I missing some config or dependency perhaps?
To set up a new project I used the CLI, so all the meta tags should be good since I didn’t change the index.html. Below is what it looks like.
...
<head>
<meta charset="utf-8">
<!--
Customize this policy to fit your own app's needs. For more guidance, please refer to the docs:
https://cordova.apache.org/docs/en/latest/
Some notes:
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content:">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#fff">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<title>Jack Hunt</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
<link rel="icon" href="icons/favicon.png">
<link rel="manifest" href="/manifest.json">
<!-- built styles file will be auto injected -->
</head>
...
And then in my app.f7.jsx I have the following template defined
...
<div id="app">
<div class="views tabs">
<div class="toolbar toolbar-bottom tabbar-labels">
<div class="toolbar-inner">
<a href="#view-home" class="tab-link tab-link-active">
<span class="tabbar-label">Home</span>
</a>
<a href="#view-catalog" class="tab-link">
<span class="tabbar-label">Search</span>
</a>
<a href="#view-settings" class="tab-link">
<span class="tabbar-label">Carter {cartItems.length}</span>
</a>
</div>
</div>
<div id="view-home" class="view view-main view-init tab tab-active safe-areas" data-url="/"></div>
<div id="view-catalog" class="view view-init tab" data-name="catalog" data-url="/catalog/"></div>
<div id="view-settings" class="view view-init tab" data-name="settings" data-url="/cart/"></div>
</div>
</div>
...