diff --git a/core/src/components/modal/gestures/swipe-to-close.ts b/core/src/components/modal/gestures/swipe-to-close.ts
index 7ce0d255b1..375d53565e 100644
--- a/core/src/components/modal/gestures/swipe-to-close.ts
+++ b/core/src/components/modal/gestures/swipe-to-close.ts
@@ -23,6 +23,7 @@ export const createSwipeToCloseGesture = (
let isOpen = false;
let canDismissBlocksGesture = false;
const canDismissMaxStep = 0.2;
+ const hasRefresherInContent = !!contentEl.querySelector('ion-refresher');
const getScrollY = () => {
if (isIonContent(contentEl)) {
return (contentEl as HTMLIonContentElement).scrollY;
@@ -69,7 +70,16 @@ export const createSwipeToCloseGesture = (
*/
const content = target.closest('ion-content');
if (content) {
- return scrollEl.scrollTop === 0;
+ /**
+ * The card should never swipe to close
+ * on the content with a refresher.
+ * Note: We cannot solve this by making the
+ * swipeToClose gesture have a higher priority
+ * than the refresher gesture as the iOS native
+ * refresh gesture uses a scroll listener in
+ * addition to a gesture.
+ */
+ return !hasRefresherInContent && scrollEl.scrollTop === 0;
}
/**
diff --git a/core/src/components/modal/test/card-refresher/index.html b/core/src/components/modal/test/card-refresher/index.html
new file mode 100644
index 0000000000..3b387b2c58
--- /dev/null
+++ b/core/src/components/modal/test/card-refresher/index.html
@@ -0,0 +1,111 @@
+
+
+
+
+ Modal - Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Card
+
+
+
+
+ Card Modal
+
+
+
+
+
+
+
diff --git a/core/src/components/modal/test/card-refresher/modal.e2e.ts b/core/src/components/modal/test/card-refresher/modal.e2e.ts
new file mode 100644
index 0000000000..2c6f8521fb
--- /dev/null
+++ b/core/src/components/modal/test/card-refresher/modal.e2e.ts
@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import { dragElementBy, test } from '@utils/test/playwright';
+
+test.describe('card modal - with refresher', () => {
+ test.beforeEach(async ({ page }, testInfo) => {
+ test.skip(testInfo.project.metadata.mode !== 'ios', 'Card style modal is only available on iOS');
+
+ await page.goto('/src/components/modal/test/card-refresher');
+ });
+ test('it should not swipe to close on the content due to the presence of the refresher', async ({ page }) => {
+ const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+ await page.click('#card');
+ await ionModalDidPresent.next();
+
+ const modal = await page.locator('ion-modal');
+ const content = (await page.$('ion-modal ion-content'))!;
+
+ await dragElementBy(content, page, 0, 500);
+
+ await content.waitForElementState('stable');
+
+ expect(modal).toBeVisible();
+ });
+});