bug: Ionic 4 - position: fixed not working after pulling down an ion-refresher

Bug Report

Ionic version:

[x] 4.x

Current behavior:

This issue appears to be similar to: https://github.com/ionic-team/ionic/issues/13237 After pulling down an ion-refresher in a page that have also fixed elements (E.G.: A fixed button bar on the bottom), the position: fixed on the other elements stops to follow the page scroll (see this GIF: https://mega.nz/#!7OIEjY7I!ZqnmZi3eMVcrr6isyX7qWAK3M44EuG--a3kM1dfZATs ). This issue have also effect if - during the refresh - you hide other elements with ngIf

Expected behavior:

The refresher should not impact the position behavior of other elements

Steps to reproduce:

Create a page with an ion refresher and some elements with fixed position. Pull down the ion-refresher. Try to scroll up and down where the fixed elements are

Related code:

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

[johnjenkins]

The issue is caused because the ion-content element gets a ‘transform: translateZ(0)’ - which means fixed elements are fixed in relation to the content element instead of the document. After refresh completes, you can remove this property and all will be well.

You can get the ion-content element using the ‘scrollContentRef.getScrollElement()’ method

[popovicanja]

@johnjenkins Hey, this solution works for me! Thanks! Here is my code snippet:

@ViewChild(IonContent, {static: false}) ionContentEl: IonContent;

onPullRefresh(event) {
    setTimeout(() => {
      event.target.complete();
      this.callService.
          .then((data) => {
            // handle data
            this.ionContentEl.getScrollElement().then((el) => {
              el.style.transform = '';
            });
          });
    });
  }