Ion-refresher shows white space

Ionic Framework
1

Hello

I implemented a ion-refresher which is working fine. But when I use dark-theme and perform the pull down a white space is shown and I don’t know how to fix that.

Does someone have a clue?

This picture shows how it begins when pulling - white space fades in
White Space 1

this ist then the final stage before the pulling is ended - white space is shown
White Space 2

Thank you for your help.

2

Can you share the code you used?

3

Hello

This is may code:

<ion-content fullscreen="true">
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)" style="background-color: var(--ion-color-item-background) !important;">
    <ion-refresher-content></ion-refresher-content>
  
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to search" refreshingSpinner="circles" refreshingText="......." [disabled]="false">
    </ion-refresher-content>
    
  </ion-refresher>
<ion-searchbar showcancelbutton="" (ionInput)="filterList($event)" [hidden]="hideSearchbar"> </ion-searchbar>
</ion-content>

.ts file

   doRefresh(event)
   {
    this.hideSearchbar = false;
    setTimeout(() => {
      event.target.complete();
    }, 20);

   };

   filterList(event)
   {
    console.log('filter ok');
   };

I tried to solve it via sass but didn’t succeed.

Thank you very much for your help!

4

Not 100% sure as I can’t replicate it, but could be from the duplicated ion-refresher-content elements you have?

5

Sorry - this was a copy/paste error on my side

This is my code. But I have still the same issue. Looks like the bacground is not filled out with the background-color of the dark-theme

<ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to search" refreshingSpinner="circles" refreshingText="......." [disabled]="false">
</ion-refresher-content>