bug: ion-menu's swipe-gesture causes error on other pages

Prerequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

On iOS, if you add ion-menu with swipe-gesture enabled on a page, and then navigate to a different page, and swipe from left side of screen to the right, there is a javascript error:

TypeError The provided value is non-finite

Here is stacktrace:

    f://localhost/assets/p-CtukzcyX-BJW7t2Im.js:2:2217 
    [native code] forEach
    f://localhost/assets/p-CtukzcyX-BJW7t2Im.js:2:2210 Q
    f://localhost/assets/p-CtukzcyX-BJW7t2Im.js:2:5030 progressStep
    f://localhost/assets/p-CtukzcyX-BJW7t2Im.js:2:5022 
    [native code] forEach
    f://localhost/assets/p-CtukzcyX-BJW7t2Im.js:2:5002 progressStep
    f://localhost/assets/smartRouter-CIhTEPpS.js:2:463597 onMove

It seems to come from the code:

const step = deltaX / this.width; // deltaX / 0 = NaN
this.animation.progressStep(NaN); // throws "The provided value is non-finite"

This could be due to swipe using a full document listener, but menu has 0 width since it's not currently rendered.

Expected Behavior

No error

Steps to Reproduce

See above.

Code Reproduction URL

ionic-framework/core/src/components/menu/menu.tsx

Lines 592 to 593 in 163cd24

    
           const delta = computeDelta(detail.deltaX, this._isOpen, this.isEndSide); 
        
           const stepValue = delta / this.width;

Ionic Info

[repositories/fareclock-tc-next] $ ionic info

Ionic:

Ionic CLI : 7.2.1 (/Users/jacob/.volta/tools/image/packages/@ionic/cli/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 8.8.13

Capacitor:

Capacitor CLI : 8.4.1
@capacitor/android : 8.4.1
@capacitor/core : 8.4.1
@capacitor/ios : 8.4.1

Utility:

cordova-res : 0.15.4
native-run : 2.0.3

System:

NodeJS : v24.14.0 (/Users/jacob/.volta/tools/image/node/24.14.0/bin/node)
npm : 11.9.0
OS : macOS Unknown

Additional Information

No response

Thanks for the report, and sorry for the delay.

Verified on 9.0.8. When you navigate away from a page, Ionic keeps that page in the DOM and hides it, but an ion-menu inside it keeps listening for edge swipes across the whole screen. A swipe from the edge then drives a menu that has no width. When the swipe comes back past its starting point, the swipe step works out to 0 / 0, which throws the non-finite error. A plain swipe to the right doesn't throw, but it opens the hidden menu, so you find it already open when you go back to that page.

Workarounds, both verified on 9.0.8:

If one menu serves the whole app, place ion-menu in App.vue next to ion-router-outlet instead of inside a page.
If the menu has to live in the page, disable it while the page is hidden:

<template>
  <ion-page>
    <ion-menu content-id="main-content" :disabled="menuDisabled">
      <ion-content class="ion-padding">Menu content</ion-content>
    </ion-menu>
    <div class="ion-page" id="main-content">
      <ion-content class="ion-padding">Page content</ion-content>
    </div>
  </ion-page>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { IonContent, IonMenu, IonPage, onIonViewWillEnter, onIonViewWillLeave } from '@ionic/vue';

const menuDisabled = ref(false);

onIonViewWillLeave(() => {
  menuDisabled.value = true;
});

onIonViewWillEnter(() => {
  menuDisabled.value = false;
});
</script>

Tracked as a bug in core.

Update: this turned out to be the same issue as #19410, which tracks the fix. The workaround above still applies.

Closing this as a duplicate of #19410. Sorry!

Navigation Menu

Repository navigation

bug: ion-menu's swipe-gesture causes error on other pages #31314

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const delta = computeDelta(detail.deltaX, this._isOpen, this.isEndSide);
	const stepValue = delta / this.width;

bug: ion-menu's swipe-gesture causes error on other pages #31314

Description

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

Activity

thetaPC commented on Oct 21, 2026

thetaPC commented on Oct 21, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions