diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx index 0969d0cd075..efadfbfee20 100644 --- a/core/src/components/refresher/refresher.tsx +++ b/core/src/components/refresher/refresher.tsx @@ -21,6 +21,7 @@ export class Refresher implements ComponentInterface { private didStart = false; private progress = 0; private scrollEl?: HTMLElement; + private backgroundContentEl?: HTMLElement; private scrollListenerCallback?: any; private gesture?: Gesture; @@ -394,6 +395,8 @@ export class Refresher implements ComponentInterface { } this.scrollEl = await contentEl.getScrollElement(); + this.backgroundContentEl = contentEl.shadowRoot!.querySelector('#background-content') as HTMLElement; + if (shouldUseNativeRefresher(this.el, getIonMode(this))) { this.setupNativeRefresher(contentEl); } else { @@ -652,12 +655,13 @@ export class Refresher implements ComponentInterface { this.appliedStyles = (y > 0); writeTask(() => { - if (this.scrollEl) { - const style = this.scrollEl.style; - style.transform = ((y > 0) ? `translateY(${y}px) translateZ(0px)` : 'translateZ(0px)'); - style.transitionDuration = duration; - style.transitionDelay = delay; - style.overflow = (overflowVisible ? 'hidden' : ''); + if (this.scrollEl && this.backgroundContentEl) { + const scrollStyle = this.scrollEl.style; + const backgroundStyle = this.backgroundContentEl.style; + scrollStyle.transform = backgroundStyle.transform = ((y > 0) ? `translateY(${y}px) translateZ(0px)` : 'translateZ(0px)'); + scrollStyle.transitionDuration = backgroundStyle.transitionDuration = duration; + scrollStyle.transitionDelay = backgroundStyle.transitionDelay = delay; + scrollStyle.overflow = (overflowVisible ? 'hidden' : ''); } }); } diff --git a/core/src/themes/ionic.globals.scss b/core/src/themes/ionic.globals.scss index fc5868eebb2..cfcc50971d9 100644 --- a/core/src/themes/ionic.globals.scss +++ b/core/src/themes/ionic.globals.scss @@ -46,7 +46,7 @@ $z-index-click-block: 99999; $z-index-fixed-content: 999; $z-index-scroll-content: 1; -$z-index-refresher: 0; +$z-index-refresher: -1; $z-index-page-container: 0; $z-index-toolbar: 10;