Ios Translucent Navbar not working

1

Hey Vladimir and everyone else!
I generated two apps recently. App n1 is on Framework7 v4 (Upgraded to v5). App n2 was generated about a month ago, using the Framework7-cli on framework7 v5. However, I only tested the latter one on android. Now that I tested it with iOS, I noticed the navbar is transparent, and not translucent.

I had the same issue when I upgraded App n*1 from F7 v4 to v5, what solved it was to add this:
<div class="navbar-bg"></div>

I checked on App n*2 but I found the div tag with class="navbar-bg" was already present.

Is there any obvious ways of fixing it, or reasons why it could go wrong? Or any ideas?

EDIT: Here are two screenshots:
Screenshot_2020-09-04_14-22-24 !
Screenshot_2020-09-04_14-21-45

EDIT 2: I just noticed a strange behavior.
So I can confirm I have disabled cache on my browser + I am editing the right file (because if I change the title of the navbar, then it changes on the app too) + that I have tested it on a cordova environment.
However, it seems that the div tag with the navbar-bg class gets “lost” while F7 is loading. It is not appearing on the Chrome Devtool. Every classes I add or tags I add are overridden when they are loaded. The only thing that stays is the Title names, links, icons. If I add the tag manually with Chrome Devtool only on the main page, then the tag appears on every single pages.

Lastly, here is my html layout:

<!DOCTYPE html>
<html>
<head> <script src="js/jquery.min.js"></script>
  <meta charset="utf-8">
  <script type="text/javascript">if (localStorage.getItem("we_secret") == null){window.location="login.html";}</script>
  <script type="text/javascript" src="js/locales.js"></script>

  <!--
  Customize this policy to fit your own app's needs. For more guidance, see:
      https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
  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: gap: content:">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">

  <meta name="theme-color" content="#fccd01">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <title>App Name</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="assets/icons/apple-touch-icon.png">
  <link rel="icon" href="assets/icons/favicon.png">
  
  
  <link rel="stylesheet" href="framework7/css/framework7.bundle.min.css">
  <link rel="stylesheet" href="css/icons.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="js/onloadcore.js"></script>
</head>



<body onload="alert=app.dialog.alert">
  <div id="app">
    <!-- Left panel with cover effect-->
    <div class="panel panel-left panel-cover theme-dark panel-init">
      <div class="view">
        <div class="page">
          <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="title">Left Panel</div>
            </div>
          </div>
          <div class="page-content">
            <div class="block">Left panel content goes here</div>
          </div>
        </div>
      </div>
    </div>
    <!-- Right panel with reveal effect-->
    <div class="panel panel-right panel-reveal theme-dark">
      <div class="view">
        <div class="page">
          <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="title">Help</div>
            </div>
          </div>
          <div class="page-content">
            <div class="block">For any questions or enquiries, you may contact us at: <br> <a href="mailto:[email protected]" class="external">[email protected]</a><br>or call us at:<br> <a class="external" href="tel:+353896122454">
+353 89 612 2454</a><br><br><a href="#" class="panel-close">Close</a></div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Views/Tabs container -->
    <div class="views tabs safe-areas">
      <div class="dim"></div>
      <!-- Tabbar for switching views-tabs -->
      <div class="toolbar toolbar-bottom tabbar-labels">
        <div class="toolbar-inner">
          <a href="#view-home" class="tab-link tab-link-active">
            <i class="icon f7-icons if-not-md">house_fill</i>
            <i class="icon material-icons if-md">home</i>
            <span class="tabbar-label">Home</span>
          </a>
          <a href="#view-catalog" class="tab-link">
            <i class="icon f7-icons if-not-md">square_list_fill</i>
            <i class="icon material-icons if-md">view_list</i>
            <span class="tabbar-label">Add New</span>
          </a>
        </div>
      </div>

      <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
      <div id="view-home" class="view view-main tab tab-active">
        <div class="page" data-name="home">
          <!-- Top Navbar -->
          <div class="navbar navbar-large">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="left">
                <a href="/settings/" class="link icon-only">
                        <i class="icon f7-icons ios-only">gear</i>
                        <i class="icon material-icons md-only">settings</i>
                </a>
              </div>
              <div class="title sliding">My List</div>
              <div class="right">
                <a href="/account/" class="link icon-only">
                  <i class="icon f7-icons if-not-md">person_crop_circle</i>
                  <i class="icon material-icons if-md">person_crop_circle</i>
                </a>
              </div>
              <div class="title-large">
                <div class="title-large-text">Welcome</div>
              </div>
            </div>
          </div>

          <!-- Scrollable page content-->
          <div class="page-content">
            <div class="block block-strong">
              <p>Using this app you can add Lists to App users.</p>
            </div>
            <div class="block-title">Introduction</div>
            <div class="list">
              <ul>
                <li>
                  <a href="/about/" class="item-content item-link">
                    <div class="item-inner">
                      <div class="item-title">About</div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
            <div class="list">
              <ul>
                <li>
                  <a href="/mywe/" class="item-content item-link">
                    <div class="item-inner">
                      <div class="item-title">My Lists</div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- Catalog View -->
      <div id="view-catalog" class="view view-init tab" data-view="catalog" data-url="/catalog/">
        <!-- Catalog page will be loaded here dynamically from /catalog/ route -->
      </div>

      <!-- Settings View -->
      <div id="view-settings" class="view view-init tab" data-view="settings" data-url="/settings/">
        <!-- Settings page will be loaded here dynamically from /settings/ route -->
      </div>
    </div>


    <!-- Popup -->
    <div class="popup" id="my-popup">
      <div class="view">
        <div class="page">
          <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="title">Popup</div>
              <div class="right">
                <a href="#" class="link popup-close">Close</a>
              </div>
            </div>
          </div>
          <div class="page-content">
            <div class="block">
              <p>Popup content goes here.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Login Screen -->
    <div class="login-screen" id="my-login-screen">
      <div class="view">
        <div class="page">
          <div class="page-content login-screen-content">
            <div class="login-screen-title">Login</div>
            <div class="list">
              <ul>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Username</div>
                    <div class="item-input-wrap">
                      
                      <input type="text" name="username" placeholder="Your username">
                    </div>
                  </div>
                </li>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Password</div>
                    <div class="item-input-wrap">
                      
                      <input type="password" name="password" placeholder="Your password">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list">
              <ul>
                <li>
                  
                  <a href="#" class="item-link list-button login-button">Sign In</a>
                </li>
              </ul>
              <div class="block-footer">Some text about login information.<br>Click "Sign In" to close Login Screen</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Framework7 library -->
  <script src="framework7/js/framework7.bundle.min.js"></script>
  
  <!-- App routes -->
  <script src="js/routes.js"></script>
  <!-- App scripts -->
  <script src="js/app.js"></script>
</body>
</html>
2

https://framework7.io/docs/safe-areas.html

3

Thank you so much for the reply!
I read the documentation you sent, however, it didn’t solve my issue, if it is of any help, I noticed something else too.

If I remove these lines from app.js, then the navbar works, but, the links do not work until I run this.

var homeView = app.views.create('#view-home', {
  url: '/',stackPages: true,pushState: true
});

When I run this, the links work again but the navbar becomes broken too.

Here is my app.js:

// Dom7
var $$ = this.Dom7


// Framework7 App main instance
var app  = new Framework7({
     iosTranslucentBars: true,
  iosTranslucentModals: true,
  root: '#app', // App root element
  id: 'com.myapp.mycompany', // App bundle ID
  name: 'App Name', // App name
  theme: 'auto', // Automatic theme detection
  version: 'BETA',
     touch: {
        tapHold: true,
        materialRipple:true,
        activeState: true,
        disableContextMenu: false,
       },
views:{
stackPages: true,
  pushState: true,
history: true,
pushStateRoot: location.href.split(location.host)[1].split('#!')[0],

 
},
  data: function () {
    return {
       school: {
        name: localStorage.school,
      },
      // App's locales from js/locales.js
      locales: locales,
    };
  },
  // App root methods
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },
  },
  // App routes
  routes: routes,
});


var homeView = app.views.create('#view-home', {
    url: '/',
    stackPages: true,
    pushState: true
});

In app.js, I tried to run it with and without: iosTranslucentBar: true,
However no changes were seen.