Ion-refresher hides my background

Ionic Framework ionic-v3
1

I have an background on my app but when I added ion-refresher than my background gone and when I refresh my app I can see the background while the page is refreshing.

HTML

<ion-content padding>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>
</ion-content>

CSS

.content {
    background-color: map-get($colors, dark)!important;
    background-image: url('../assets/graphics/pattern_bg_dark_top_right.png'), url('../assets/graphics/pattern_bg_dark_bottomleft.png');
    background-repeat: no-repeat, no-repeat;
    background-position-x: right, left;
    background-position-y: top, bottom;
    background-size: 60%;
    color: map-get($colors, white );![IMG_1441|281x500]
2

To fix that you can add “!important” to the end of your background’s selectors to force them to be applied correctly :

.content {
    background-color: map-get($colors, dark) !important;
    background-image: url('../assets/graphics/pattern_bg_dark_top_right.png') !important; url('../assets/graphics/pattern_bg_dark_bottomleft.png') !important;
    background-repeat: no-repeat, no-repeat  !important;
    background-position-x: right, left  !important;
    background-position-y: top, bottom  !important;
    background-size: 60%  !important;
}

Keep me informed.

3

Hi, I know you posted a while ago, but I was having the same issue you are and finally figured out a solution. I wanted to share in case anyone else is running across this issue and might find this thread googling.

When you use a refresher, a new CSS property is added (background-color: inherit) that changes the scroll-content div (which is where content is put from the <ion-content> tag). This messes up your background if you are using an image. To get around this issue, add this into your app.scss

.has-refresher > .scroll-content { background-color: transparent !important; }

4 Likes