[Bug] fullscreen + ion-refresher hides refresh

[ionitron-bot]

Original issue by @AmitMY on 2017-02-17T21:54:02Z

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When having a ion-content with fullscreen, and an ion-refresher the refresher is hidden behind the header

Expected behavior:
The refresher must always appear just below the header

Steps to reproduce:

• Use this demo: https://github.com/driftyco/ionic/tree/dbfc183cac036099603f9e51611bfccbc900a08b/demos/src/refresher
• Add fullscreen to ion-content

Related code:

<ion-content fullscreen>
    <ion-refresher (ionRefresh)="refreshList($event)">
        <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
</ion-content>

Other information:
Motivation:
Having a list you can pull down to refresh, or pull up and hides the header

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed

[Pseudo-Nym]

any idea when this issue might get resolved?

[moritzvieli]

This is also a problem in Ionic 4 as well.

[adrael]

This is also a problem in Ionic 5 as well.
Video showing the bug is available here for 1 week: https://filebin.net/5qlt4zg0cb60kkcj

[dannywap]

Here's a workaround for ionic 5 .ios. Can't figure out why it does not work for .md (android):
.overscroll {
--background: rgba(250,250,250,0.0);
}
There is an inheritance of "--background: #fff" causing the issue. And in ios above scss overides this. But when I run as android so that .md-styles set in this workaround is not working.

[Cloud7050]

(I am on @ionic/angular@5.1.1) After looking into what makes the ion-refresher tick in my browser's dev panel and trying a lot of different CSS & HTML changes, I think I've found a workaround for Android.

In pages where your ion-content is fullscreen, add:

<style type="text/css">
ion-refresher.md {
	margin-top: 56px;
}
</style>

This px value is the height of an Android ion-toolbar in an ion-header, and matches the --offset-top used by a fullscreen ion-content in Android . In a browser, I think the presence of a faked div.statusbar (20px) messes with the div.refresher-refreshing part of the animation, where the applied margin-top slips above the Android device's "screen". However, when running my app on a true Android emulator, this doesn't seem to be an issue.

There are still many issues I've encountered though, and I don't know if they're related. The arrow head of the refresher is positioned too far down the shaft of the arrow in an Android emulator, but is fine in a browser. For iOS, there is an ugly black space above the fullscreen ion-content when pulling, and while refreshing, this is also visible through a translucent ion-toolbar. All the text, the arrow and the refresh icon of the refresher are also white save for a tiny dash which I think is from the arrow (this may be what @dannywap is talking about above). Long story short I think I will be avoiding this component.

[doductrung1998]

Add z-index to "ion-refresher" is fix problem for now