CapacitorJS iOS Swipe back with Vue Router causes a blank page

user_1575556 0
Viewed 832

I have a Capacitor project using Vue and Vue Router, with swipe gestures enabled I am unsure if this issue is coming in from the Vue Router or Capacitor.

The gestures are enabled with a plugin using this line

bridge.getWebView()?.allowsBackForwardNavigationGestures = true;

If I go one page, to the next, then swipe back. The previous page appears in the view and slides in as expected.

However, if I scroll even a few pixels before moving to the next page. When swiping back, the previous page appears white with no content. The current page slides out as expected Its only once the slide transition is finished that the previous page pops onto the screen

If I remove the scrollBehaviour function in my router it works correctly

scrollBehavior (to, from, savedPosition) {

This function can be empty, or return various positions, it all causes the slide on the non active page to be white.

Example of the blank previous page

Without scrollBehavior enabled, on swiping back I do see the previous page at the scroll position it was left at. But, when the slide animation finishes the page then jumps to the top.

Does anyone have any thoughts as to how this can be fixed?

capacitor vue-router vue.js ios
1 Answers

I don't use any plugin, I changed file followed this instructions: https://github.com/ionic-team/capacitor/issues/3808#issue-743829827

My VueRouter:

const router = new VueRouter({
 routes,
  mode: "hash",
  base: process.env.VUE_ROUTER_BASE,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
});
user_32717520
Related