Screen displaces from fullscreen mode while navigating in listview in PWA
Hello… I have a framework7-svelte PWA app with 5 tabs where most of them have ListView component.
In the first tab called Latest there is a list view that navigates to Detail page
Latest.svelte
<Page name={"Latest"}> <Navbar title={"Latest"} large/> <ListView> {#each items as items,i (i)} <ListItem link="/detail/{item.id}/{item.title}" title={item.title} footer={item.updated && new Date(item.updated).toLocaleDateString()}/> {/each} </ListView> </Page>
Detail.svelte
<Page name="detail"> <Navbar backLink={"Back"} {title}> <NavRight> <MyIcon active={isBookmarkClicked} name={"bookmark"} style={"font-size : 18px; "} on:iconClick={createBookmark} /> </NavRight> </Navbar> <!--Detail Page content--> </Page>
index.html
<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">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Once I add the PWA to homescreen, The problem is when I click on the first (only for the first) listitem of the Latest tab, The screen gets displaced slightly below to bottom while navigating and stays there… When i close and reopen the app its goes back to normal .
This happens only for the first listItem of the first Tab. Here’s the gif…
Does anyone have an idea why it’s behaving like this and helpful solution? Thanks in advance. 