Back button stops working on app reload

Odd behaviour that I cannot seem to troubleshoot. The back button on my app works fine when the app is opened for the first time, it however stops working if you leave the app and comeback to it on android.

This problem happens the second time you start the app, it then doesn’t happen again the 3rd time but does again the 4th and so on and so forth.

My back button code.


I have managed to replicate this for a video using a refresh on browser.

Anyone got the slightest clue what could be causing this, there are no console errors.

var $$ = Dom7;
// initlise the framework 7 element on a root id with options
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'My App',
// App id
id: 'uk.co.myapp',
material: true,
navbar: {
    mdCenterTitle: true,
},
view: {
    pushState :true,
	stackPages: true,            
},
// Add default routes
routes: [
    {   
        name: 'index',
        path: '/index/',
        url: 'index.html',
        options: {
            transition: 'f7-parallax',
          },
    },   
  {
    name: 'about',
    path: '/about/',
    url: 'about.html',
    options: {
        transition: 'f7-parallax',
      }
  },
  {
    name: 'report',
    path: '/report/',
    url: 'report.html',
    options: {
        transition: 'f7-parallax',
      },
  },
  {
    name: 'news',
    path: '/news/',
    url: 'news.html',
    options: {
        transition: 'f7-parallax',
      },
  },
  {
    name: 'waste',
    path: '/waste/',
    url: 'waste.html',
    options: {
        transition: 'f7-parallax',
      },
  },
  {
    name: 'loveportsmouth',
    path: '/loveportsmouth/',
    url: 'love.html',
    options: {
        transition: 'f7-parallax',
      },
  },
],    
});

//add the page views to the dom
var mainView = app.views.create('.view-main', {
});

This is defintely something to do with pushstate by the way. As if i turn it off and manually set the button to go back then it works fine.

Inspect the mainView, show me that on refresh or app reload the history, doesn’t have the root in it.
So when the page is first loaded this is the history state
History: ["/", “/”, “/page/”]
but then when the page is refreshed it looks like this
History: ["/page/"]

It’s missing the home/index page in the history after refresh, anyone know what i can do about this???