Как правильно разместить контент для обновления?

Question

Я хочу освежающий контент ioni c на одной странице. При этом это не работает так, как должно. Логи c работает б c. завершено событие обновления, но есть проблема с представлением. Там просто черный ящик, где должно быть содержание refre sh (см. Рисунок 1). Поэтому я попытался обойти эту проблему с некоторыми css:

ion-refresher-content {
  padding-bottom: 100%;
  background-color: #ffffff;
}

Это фактически решило проблему черного ящика, но содержимое обновления теперь смещено вверх (см. Рисунок 2, вы видите только половину прядильщика). Я публикую фотографии, мой код html и css ниже и надеюсь, что вы можете мне помочь:)

html:

<ion-header>
  <ion-toolbar>
    <ion-title color="primary">
       refresh
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" (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:

ion-refresher-content {
  padding-bottom: 100%;
  background-color: #ffffff;
}