From 9d6ec2925cb2314d5379b864aef467b34afbb318 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 2 Feb 2023 13:20:03 -0500
Subject: [PATCH] fix(refresher): prevent clearing virtual scroll overflow
 styling (#26613)

Resolves #26553
---
 core/src/components/refresher/refresher.tsx   | 32 +++++++++++++++++--
 .../refresher/test/scroll-target/index.html   |  3 +-
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
index 1c18c8d55d..30f1c1f701 100644
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -39,6 +39,7 @@ export class Refresher implements ComponentInterface {
   private backgroundContentEl?: HTMLElement;
   private scrollListenerCallback?: () => void;
   private gesture?: Gesture;
+  private overflowStyles?: { [key: string]: string };
 
   private pointerDown = false;
   private needsCompletion = false;
@@ -566,6 +567,7 @@ export class Refresher implements ComponentInterface {
   private onStart() {
     this.progress = 0;
     this.state = RefresherState.Inactive;
+    this.memoizeOverflowStyle();
   }
 
   private onMove(detail: GestureDetail) {
@@ -710,7 +712,7 @@ export class Refresher implements ComponentInterface {
       this.setCss(0, '0ms', false, '');
     }, 600);
 
-    // reset set the styles on the scroll element
+    // reset the styles on the scroll element
     // set that the refresh is actively cancelling/completing
     this.state = state;
     this.setCss(0, this.closeDuration, true, delay);
@@ -729,11 +731,37 @@ export class Refresher implements ComponentInterface {
         scrollStyle.transform = backgroundStyle.transform = y > 0 ? `translateY(${y}px) translateZ(0px)` : '';
         scrollStyle.transitionDuration = backgroundStyle.transitionDuration = duration;
         scrollStyle.transitionDelay = backgroundStyle.transitionDelay = delay;
-        scrollStyle.overflow = overflowVisible ? 'hidden' : '';
+        if (overflowVisible) {
+          scrollStyle.overflow = 'hidden';
+        } else {
+          this.restoreOverflowStyle();
+        }
       }
     });
   }
 
+  private memoizeOverflowStyle() {
+    if (this.scrollEl) {
+      const { overflow, overflowX, overflowY } = this.scrollEl.style;
+      this.overflowStyles = {
+        overflow: overflow ?? '',
+        overflowX: overflowX ?? '',
+        overflowY: overflowY ?? '',
+      };
+    }
+  }
+
+  private restoreOverflowStyle() {
+    if (this.overflowStyles !== undefined && this.scrollEl !== undefined) {
+      const { overflow, overflowX, overflowY } = this.overflowStyles;
+      this.scrollEl.style.overflow = overflow;
+      this.scrollEl.style.overflowX = overflowX;
+      this.scrollEl.style.overflowY = overflowY;
+
+      this.overflowStyles = undefined;
+    }
+  }
+
   render() {
     const mode = getIonMode(this);
     return (
diff --git a/core/src/components/refresher/test/scroll-target/index.html b/core/src/components/refresher/test/scroll-target/index.html
index caa467fa3b..2a229ae281 100644
--- a/core/src/components/refresher/test/scroll-target/index.html
+++ b/core/src/components/refresher/test/scroll-target/index.html
@@ -27,7 +27,6 @@
 
       #inner-scroll {
         height: 100%;
-        overflow-y: auto;
       }
     </style>
   </head>
@@ -45,7 +44,7 @@
           <ion-refresher-content></ion-refresher-content>
         </ion-refresher>
         <div id="content">
-          <div id="inner-scroll" class="ion-content-scroll-host">
+          <div id="inner-scroll" class="ion-content-scroll-host" style="overflow-y: auto">
             <ion-list id="list"></ion-list>
           </div>
         </div>