From adbb50ca5b92793ba002e4d704b2a643b92aabc7 Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Tue, 4 Apr 2023 12:04:50 -0400 Subject: [PATCH] fix(refresher): set overflow styles when using custom scroll target (#27058) * bug(refresher): set overflow styles when using custom scroll target * bug(refresher): set overflow styles when using custom scroll target * Apply suggestions from code review Co-authored-by: Liam DeBeasi * Add comment --------- Co-authored-by: Liam DeBeasi --- core/src/components/refresher/refresher.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx index 2b687aa616..347c9bdf14 100644 --- a/core/src/components/refresher/refresher.tsx +++ b/core/src/components/refresher/refresher.tsx @@ -354,7 +354,10 @@ export class Refresher implements ComponentInterface { this.state = RefresherState.Pulling; - writeTask(() => this.scrollEl!.style.setProperty('--overflow', 'hidden')); + // When ion-refresher is being used with a custom scroll target, the overflow styles need to be applied directly instead of via a css variable + const { scrollEl } = this; + const overflowProperty = scrollEl!.matches(ION_CONTENT_CLASS_SELECTOR) ? 'overflow' : '--overflow'; + writeTask(() => scrollEl!.style.setProperty(overflowProperty, 'hidden')); const animationType = getRefresherAnimationType(contentEl); const animation = createPullingAnimation(animationType, pullingRefresherIcon, this.el); @@ -378,7 +381,10 @@ export class Refresher implements ComponentInterface { this.gesture!.enable(false); - writeTask(() => this.scrollEl!.style.removeProperty('--overflow')); + const { scrollEl } = this; + const overflowProperty = scrollEl!.matches(ION_CONTENT_CLASS_SELECTOR) ? 'overflow' : '--overflow'; + writeTask(() => scrollEl!.style.removeProperty(overflowProperty)); + if (this.progress <= 0.4) { ev.data.animation.progressEnd(0, this.progress, 500).onFinish(() => { this.animations.forEach((ani) => ani.destroy());