Ion Refresher Background color wont change ionic - ionic-framework

Question

I'm using an ionic refresher to refresh content on a page in my application. However, when I pull up the ion-refresher, background does not get fully set to the color I want.
This is a CSS class I'm applying to the ion-refresher:
ion-refresher {
background-color: #dedede;
}
ion-refresher-content {
background-color: #dedede;
}
And this it what the result looks like:
How do I remove the white gap between the ion refresher and the main content?

Answer 1

On Ionic 4, this CSS worked for me:
ion-refresher-content {
padding-bottom: 200px;
background-color: yellow;
.refresher-pulling {
position: fixed;
top: 50px;
}
}
The padding-bottom: 200px; fills up the space to show the yellow color, but it also introduces a new issue. The refresher arrow disappears! In order to keep the arrow in place and make it function normally, the .refresher-pulling and its corresponding styles are added. This way, now the app background color shows without any white gaps and also the spinner stays in place.
Hope this helps someone.

Answer 2

When you pull up, one div was been created called fixed-content
For remove the gap just add .fixed-content in your .scss
Example:
.fixed-content{
background:#dedede;
}

Answer 3

This is what got it working for me.
ion-refresher-content {
padding-bottom: 100px;
background-color: #dedede;
}

Answer 4

#devner's solution is not working correctly with iPhone X and kind (i.e. devices with safe-area-inset).
Proper solution (Ionic 4):
ion-refresher-content {
position: relative;
padding-bottom: 200px;
background-color: var(--base-background-color-body);
.refresher-pulling, .refresher-refreshing {
position: relative;
top: 30px;
}
}
Appendix: best UX on my opinion can be achieved with next HTML:
<ion-refresher slot="fixed" pullFactor="0.5" (ionRefresh)="onPullToRefresh($event)">
<ion-refresher-content
pullingIcon="refresh"
refreshingSpinner="crescent"
></ion-refresher-content>
</ion-refresher>