I’m bulinding an ionic 4 app in which I have several pages which can refresh to update some data. For all pages the refresh functionality is the same. So, in order to save code I’ve isolated the ion-refresher component onto a component of my own which I could use on any page to be refreshed. The problem is When doing so the refresher is present but it isn’t shown over the ion-content tag. Basically what I did was;
<ion-refresher (ionRefresh)="doRefresh($event)"> <ion-refresher-content refreshingSpinner="dots"></ion-refresher-content> </ion-refresher>
<ion-content> <refresher-component></refresher-component> <ion-list> <ion-item> .... some content </ion-item> </ion-list> </ion-content>
The resulting view isn’t the expected one, and the problem here as I understand is that the shadow dom that the ion-content generates, has a different style when pulling to refresh. Here on the screenshot below you can see how the inner div from the ion-content gets a translateY of 60px (this is added dynamically while pulling to refresh). Before, when setting the ion-refresher directly on the page component this didn’t happen when pulling to refresh.
Any hint on how could I solve this? Thanks a lot!