Ionic 4 - Ion refresher bug

[pabloo87]

Hi, i notice a weird bug when using ion-refresher in Ionic 4…

As you can see when you drag appears a black block on the place where the refresher should be.
After a little styling i discover this is a css problem that can be walkaround adding:

ion-content {
	background-color: #fff;
}

.inner-scroll.scroll-y {
	z-index: 2;
}

The problem is the last part as innerscroll element is inside ShadowDom and it can’t be styled.

Any ideas?

[MattE]

Can you show your html?

[pabloo87]

Sure, it happends on the app i’m working on and in this raw template too:

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-refresher slot="fixed">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  The world is your oyster.
  <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>
</ion-content>

[MattE]

Can you put some text in the refresher-content?

Maybe that causes the black bar.

<ion-refresher-content
      pullingText="Refreshing..."
      refreshingSpinner="crescent">
</ion-refresher-content>

[pabloo87]

Still the same, even if i add the ion refresh function call:

[MattE]

Other idea: can you test is outside of Ionic Lab?
http://localhost:8100 should get you there.

[pabloo87]

We are getting warmer, the black background disappear but the z-index problem is still there (but it should work with ionic lab, i suppose this is a real bug)

I tried in a different browser but the problem is still there.

[danielmm1997]

I think i have the same Issue. Could you please create a Issue on github?

[Jongbonga]

Was this resolved?
I’m getting the same error on the last ionic release