I am using Framework7 version 8.2.0 and the navbars of my two pages overlap on iOS only (not on Android) when I emulate these devices in Firefox, Chrome or Edge:
Here is what I am getting on iOS emulation (Edge):
And here is what I am getting on Android emulation (Edge):
Here is my simplified HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>test</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/framework7-bundle.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/css/framework7-icons.css">
</head>
<body>
<div id="app">
<div class="view view-main">
<div data-name="info" class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="/" class="link">
<i class="icon icon-back"></i>
back
</a>
</div>
<div class="title">test 2</div>
</div>
</div>
<div class="page-content tab" id="tab-about">
About
</div>
</div>
<div data-name="home" class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">
test
</div>
<div class="right margin-right-half">
<a href="/info/" class="margin-right-half"><i class="icon f7-icons">info_circle_fill</i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/framework7-bundle.min.js"></script>
<script type="module" src="/js/app.js"></script>
</body>
</html>
And the JavaScript code:
let app = new Framework7({el: '#app', name: 'testing', panel: {swipe: true}, routes: [{path: '/', pageName: 'home'}, {path: '/info/', pageName: 'info'}]});
let mainView = app.views.create('.view-main');
I created this example from the official documentation, putting together a simple app and an info page.
Here is a fiddle to run this code with the iOS theme. Changing the theme on the first line of the of the JavaScript from ios to md fixes the problem. However, I would like my app run well on iOS too.
One possible workaround is adding this line to my JavaScrip code:
app.views.main.router.navigate('/', {animate:false});
Another workaround is to disable dynamic navbar on iOS:
let mainView = app.views.create('.view-main', {iosDynamicNavbar: false});
However, it shouldn't be necessary to do this, as it should work nicely out-of-the-box.
I am doing anything wrong or is that a bug?