Ionic 4 infinite scroll on IOS 13 jumps back tot top of list

Ionic Framework
1

Hello,
I have a project in Ionic 4 and got a list of news item from an API. Now i’m testing my app in xcode beta for the new IOS13 release. When i scroll down to get more items and the loader is done, it add’s the additional items and then the view will jump to the very top op the list.

There are no error logs or anything

I am new here, so if you need more information ask me

2 Likes
2

I had the same issue, but I noticed the problem occurs when repeated elements and ion-infinite-scroll element are direct children of the ion-content.
The issue disappeared after wrapping it in a div.
You could give it a try.

1 Like
3

Hey guys,

I have the same problems as @neluskoevoet described. With iOS13 infinite scroll jumps back to top of the list/site.

I don’t understand your comment unfortunately @Coldiary. What should I wrap in div? Here you can find an example: https://ionicframework.com/docs/api/infinite-scroll please show me what to wrap? I tried several things to wrap but it doesn’t work for me.

4

@sveen I wrapped my list and my infinite scroll inside a div and this solved my problem

5

Ok, I tried again. This works for me too (wrap initial ion-card which is an ngFor output).

But I think this is only a workaround for it or do you disagree?

6

@sveen yes this is a workaround i think,

7

Sorry, but I don’t get it. What and where should I wrap with DIV? My component template looks like this:

<div class="my-virtual-list">
    <ng-container *ngIf="displayedResults$ | async as results">
        <ion-virtual-scroll [items]="results">
            <book-details-item *virtualItem="let result" [result]="result"></book-details-item>
        </ion-virtual-scroll>
        <ion-infinite-scroll threshold="100px" (ionInfinite)="fireLoadMore($event)"> ... </ion-infinite-scroll>
    </ng-container>
</div>
8

This fixes the scroll bug when rendering content from a setInterval() into data within an ngFor.