Screen displaces from fullscreen mode while navigating in listview in PWA

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


<Page name={"Latest"}> <Navbar title={"Latest"} large/> <ListView> {#each items as items,i (i)} <ListItem link="/detail/{}/{item.title}" title={item.title} footer={item.updated && new Date(item.updated).toLocaleDateString()}/> {/each} </ListView> </Page>


<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>


<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. :slight_smile:

I found the bug…There’s no issue with framework7. I am using @html directive in svelte where the html string is coming from a rss feed. There is something wrong with html css in the rss feed not with framework7.