fix(refresher): scroll styles are reset when using non-native refresher

core/src/components/refresher/refresher.tsx

@@ -685,6 +685,16 @@ export class Refresher implements ComponentInterface {
       // and close the refresher
       // set that the refresh is actively cancelling
       this.cancel();
+    } else if (this.state === RefresherState.Inactive) {
+      /**
+       * The pull to refresh gesture was aborted
+       * so we should immediately restore any overflow styles
+       * that have been modified. Do not call this.cancel
+       * because the styles will only be reset after a timeout.
+       * If the gesture is aborted then scrolling should be
+       * available right away.
+       */
+      this.restoreOverflowStyle();
     }
   }
 
@@ -709,7 +719,12 @@ export class Refresher implements ComponentInterface {
       this.state = RefresherState.Inactive;
       this.progress = 0;
       this.didStart = false;
-      this.setCss(0, '0ms', false, '');
+
+      /**
+       * Reset any overflow styles so the
+       * user can scroll again.
+       */
+      this.setCss(0, '0ms', false, '', true);
     }, 600);
 
     // reset the styles on the scroll element
@@ -718,7 +733,13 @@ export class Refresher implements ComponentInterface {
     this.setCss(0, this.closeDuration, true, delay);
   }
 
-  private setCss(y: number, duration: string, overflowVisible: boolean, delay: string) {
+  private setCss(
+    y: number,
+    duration: string,
+    overflowVisible: boolean,
+    delay: string,
+    shouldRestoreOverflowStyle = false
+  ) {
     if (this.nativeRefresher) {
       return;
     }
@@ -731,11 +752,18 @@ 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;
-        if (overflowVisible) {
-          scrollStyle.overflow = 'hidden';
-        } else {
-          this.restoreOverflowStyle();
-        }
+        scrollStyle.overflow = overflowVisible ? 'hidden' : '';
+      }
+
+      /**
+       * Reset the overflow styles only once
+       * the pull to refresh effect has been closed.
+       * This ensures that the gesture is done
+       * and the refresh operation has either
+       * been aborted or has completed.
+       */
+      if (shouldRestoreOverflowStyle) {
+        this.restoreOverflowStyle();
       }
     });
   }