Infinite scroll does not work with ion-content fullscreen

Question

I am using infinite scroll in Ionic-3 and I hide Main-Header and showing Mini-header on scroll.It is a causing problem in android only and problem is : On scrolling Main-Header Stuck behind as shown in Image,

I used ion-content with fullscreen to hide and show header. but when I use fullscreen property in 'ion-content' it resolve header issue but after using fullscreen infinite-scroll does not work in Android

Here is my test code.

<!--Main-Header-->
<ion-header [hidden]="isScrollStarted">
</ion-header>

<!--Mini-Header-->
<ion-header [hidden]="!isScrollStarted">
</ion-header>

<ion-content fullscreen>

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

</ion-content>

Answer 1

You should add class="ion-no-padding" in <ion-content> tag.like this:

<ion-content [fullscreen]="true" class="ion-no-padding">
</ion-content>