Ionic / iOS - ion-list won't scroll - html

Question

I am trying to run my ionic app with xcode by doing:
ionic package build ios
ionic cordova prepare
Then I open up xcode and do Clean and Run. When on the device the scrolling acts like this:
My HTML looks like this:
...
<ion-content no-padding>
<div (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
<div class ='contentone' [#moveList]='moveState'>
<ion-list class="marginstatus" no-padding>
<ion-item class="changepadding" *ngFor="let z of items ; let i = index" (click)='expandItem(i)' id='{{i}}' #feedstyle text-wrap>
<div class="flex" #flex>
<div class="nonzoomimage">
<img class="imagepost" src="{{z.pic}}">
</div>
<div class="descholder">
<div class='description'>{{z.description}}</div>
<div class='link'>{{z.link}}</div>
</div>
</div>
<div class="feedtoptextcontainer" #feedtop>
<div class="imageparent">
<img class="postprofilepic" src="{{z.pic}}">
</div>
<div class="usernamecontainer">
<h4 class="postusername">Ed Bundy</h4><br>
<h4 class="poststudio">Ed's Studio</h4>
</div>
<div class="postprofilelink">
<div class="book">Book</div> #edbundyhair
</div>
</div>
<img class="imageposttwo" #imagepost src="{{z.pic}}">
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</div>
</ion-content>
...
My doInfinite function, of ion-infinite-scroll looks like this, it is empty, just a placeholder right now - it does nothing:
doInfinite(): Promise<any> {
console.log('Begin async operation');
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 500);
})
}
It just glitches when you try to scroll - and doesn't scroll at all, doInfinite fires because I can see the log message.

Answer 1

Ionic by default uses the Ionic scroll, which simulates the Momentum Scrolling as seen on the iOS devices, by adding the overflow-scroll=true attribute, it will basically use this particular ion-content to use the native scrolling (if you want a global effect check out the following link.
http://ionicframework.com/docs/v1/api/provider/$ionicConfigProvider/
Please also check if css classes are affecting the style of the element!

Answer 2

Is it only doing the bug when you scroll upwards? If yes, try to check this:
ion-infinite-scroll fires when scrolling up - Ionic
Can you try to start with and build something simple like this?
<ion-infinite-scroll (ionInfinite)="fetchMore($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
and on your .ts
fetchMore(event) {
console.log('Begin fetching more data');
setTimeout(() => {
console.log('Async operation has ended');
event.complete();
}, 500);
}
Not sure why your code would cause that glitch but if you happen to make something simple as this work, you'll find out what causes the bug as you build it back up to what you have.
Could be that the $event.waitFor() still has its issues. If you need to wait for a promise like when you're fetching more data. you can have something like this.
fetchMore(event) {
this.fetchingDataService.fetchPromise().then(
(moreData) => {
//append moreData
event.complete();
},
(err) => {
//do something with error
event.complete();
}
);
}

Answer 3

Found the problem. After upgrading to Ionic 3, at least in my case, the swipe event on an ion-list in an ion-scroll freeze my scroll.
<ion-scroll scrollY="true">
<ion-list padding (swipe)="someThing($event)"> <!-- There, swipe, removing it make my ion-scroll scrollable again -->
<ion-item>
<p>1</p>
</ion-item>
....
<ion-item>
<p>9999</p>
</ion-item>
</ion-list>
</ion-scroll>