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

Issue number: resolves #27601 

---------

## What is the current behavior?
The current behavior restores overflow styles while moving (within the
setCSS function).

## What is the new behavior?
Overflow styles are restored when refresher gesture ends.

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
Honestly, I don't know exactly. From code perspective I would say 'Yes',
but I can't get the impact of the change.

Ionic Team edit: There are no changes to the public API, and this is
fixing a behavior that used to work so there are no breaking changes.

## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

core/src/components/refresher/refresher.tsx

@@ -692,6 +692,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();
     }
   }
 
@@ -716,7 +726,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
@@ -725,7 +740,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;
     }
@@ -738,11 +759,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();
       }
     });
   }