Router history corruption on back navigation - page added instead of removed

Questions
1

Hi,

I’m working on a Capacitor hybrid app using Framework7 Svelte (8.3.4) with the following view configuration:

view: {
  animate: false,
  stackPages: false,
  browserHistory: true,
  pushState: true
}

The Problem

When navigating back (either via swipe back on iOS or physical back button on Android), the router history gets corrupted — instead of removing the current page from history, it adds it again.

Example:

  1. Navigate: / → /page1/ → /page2/ → /page3/ → /page4/
  2. History at /page4/: ["/", "/page1/", "/page2/", "/page3/"]
  3. Press back → navigates to /page3/ ✓
  4. History after back: ["/", "/page1/", "/page2/", "/page3/", "/page4/"] ← /page4/ added instead of removed!
  5. Press back again → navigates to wrong page, DOM breaks, links become unclickable

I confirmed this with f7.on('routeChange', ...) event listener logging both newRoute.url and router.history.

What I’ve tried

  • preloadPreviousPage: false → fixes history corruption but back navigation shows blank page (previous page not rendered)
  • uniqueHistory: true + allowDuplicateUrls: false → doesn’t fix the issue
  • browserHistoryInitialMatch: true → no effect
  • browserHistorySeparator: '' → no effect
  • Manually deleting from history array → unstable behavior
  • Disabling browserHistory and pushState → fixes corruption but loses browser history functionality

Current workaround

On Android: intercept the back button, show “Press again to exit” toast on second press, exit app on third. This masks the problem but doesn’t fix it.

On iOS: disabled swipe back (mdSwipeBack: false) to avoid the issue entirely.

Question

Is this a known bug with browserHistory: true + pushState: true in Capacitor environment? Is there a recommended way to use back navigation without history corruption?

Any help would be appreciated. Thanks!