From 49db6d02883b11b5f179300e2eaa298002a381e8 Mon Sep 17 00:00:00 2001
From: Amanda Smith <90629384+amandaesmith3@users.noreply.github.com>
Date: Tue, 12 Oct 2021 11:19:35 -0500
Subject: [PATCH] fix(modal): fix backdrop animation for sheets with off-center
 backdropBreakpoint (#24061)

---
 core/src/components/modal/gestures/sheet.ts     | 2 +-
 core/src/components/modal/test/sheet/index.html | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/core/src/components/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts
index 8ae61a6a82..1fad01b47e 100644
--- a/core/src/components/modal/gestures/sheet.ts
+++ b/core/src/components/modal/gestures/sheet.ts
@@ -22,7 +22,7 @@ export const createSheetGesture = (
 
   const customBackdrop = [
     { offset: 0, opacity: 'var(--backdrop-opacity)' },
-    { offset: backdropBreakpoint, opacity: 0 },
+    { offset: 1 - backdropBreakpoint, opacity: 0 },
     { offset: 1, opacity: 0 }
   ]
 
diff --git a/core/src/components/modal/test/sheet/index.html b/core/src/components/modal/test/sheet/index.html
index fe45f38cba..e841244bc0 100644
--- a/core/src/components/modal/test/sheet/index.html
+++ b/core/src/components/modal/test/sheet/index.html
@@ -89,6 +89,7 @@
         <ion-button id="custom-breakpoint-modal" onclick="presentModal({ initialBreakpoint: 0.5, breakpoints: [0, 0.5, 1] })">Present Sheet Modal (Custom Breakpoints)</ion-button>
         <ion-button id="custom-breakpoint-modal" onclick="presentModal({ initialBreakpoint: 0.5, breakpoints: [0, 0.5, 0.75] })">Present Sheet Modal (Max breakpoint is not 1)</ion-button>
         <ion-button id="custom-backdrop-modal" onclick="presentModal({ backdropBreakpoint: 0.5, initialBreakpoint: 0.5 })">Present Sheet Modal (Custom Backdrop Breakpoint)</ion-button>
+        <ion-button id="custom-backdrop-off-center-modal" onClick="presentModal({ backdropBreakpoint: 0.3, initialBreakpoint: 0.3, breakpoints: [0.3, 0.5, 0.7, 1] })">Present Sheet Modal (Backdrop breakpoint is off-center)</ion-button>
         <ion-button id="custom-height-modal" onclick="presentModal({ cssClass: 'custom-height' })">Present Sheet Modal (Custom Height)</ion-button>
         <ion-button id="custom-handle-modal" onclick="presentModal({ cssClass: 'custom-handle' })">Present Sheet Modal (Custom Handle)</ion-button>
         <ion-button id="no-handle-modal" onclick="presentModal({ handle: false })">Present Sheet Modal (No Handle)</ion-button>