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

[MrSantaCloud]

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

[tlatforlz]

I got the same bug. Have update for this ?

[tlatforlz]

@MrSantaCloud you can use ion-fab instead a div with fixed position

[Ramouchau]

same here. Anyone has any solution ?

[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 = '';
            });
          });
    });
  }

[kunalproctur]

here's my solution
<ion-fab vertical="bottom" horizontal="end" slot="fixed"> <div *ngIf="showFAB" class="bottomright"> <img src="../../assets/imgs/scroll_to_top.png" (click)="scrollContent()" /> </div> </ion-fab>
add tag which has slot="fixed"

[jessems]

@popovicanja's didn't work exactly as is. I had to add an additional delay.

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

...

doRefresh(event) {
    setTimeout(() => {
      this.dataService.refreshClient(event).subscribe(x => {
        event.target.complete().then(x=> {
          setTimeout(() => {
            this.ionContentEl.getScrollElement().then((el) => {
              el.style.transform = '';
              // el.style.setProperty('transform', '', 'important');
            });
          },1000)
        })

      });
    });

[liamdebeasi]

Thanks for the issue. Is this still an issue with the latest version of Ionic Framework? If so, please provide a repo with the code required to reproduce this issue.

[popovicanja]

Hey @liamdebeasi, yes it is an issue still.

Here is my code:

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="getEmployees($event)">
    <ion-refresher-content pullingIcon></ion-refresher-content>
  </ion-refresher>
  <div class="container">
         ...
  </div>
</ion-content>

getEmployees(event) {
    this.loadingService.showLoader();
    setTimeout(() => {
      event.target.complete();
      this.clockingService.getEmployeesList()
          .then((employees: DisplayEmployee[]) => {
            this.searchValue = '';
            this.setEmployees(employees);
            this.loadingService.hideLoader();

            this.ionContentEl.getScrollElement().then((el) => {
              el.style.transform = '';
            });
          });
    });
  }

Although with this fix it is is working, sometimes when you pull down to refresh it moves whole page. Also in iOS devices it causes some glitches, like the content is displayed behind header and header is not fixed.

[liamdebeasi]

@popovicanja Can you provide this as a full repo I can clone? Code snippets usually are not enough for us to reproduce the issue.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!