Ionic / iOS - ion-list won't scroll

ion-item click event ionic 4
ion-list-header
ion-item tappable
ionic list with icon
ion-item selected
ion-item center
ion-item text-wrap ionic 4
ionic list with image

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.


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!

ion-list, The mode determines which platform styles to use. Attribute, mode. Type, "ios" | " md". Methods� Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards


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();
          }
        );
  }

Ion-list is not supported on ios devices in Ionic 4 - Angular, Hi. I am testing my app in an ios device, specifically in iPhone 7. I also tested in in iPhone 10. Although I can see my list in an Android device,� Demo source List ion-list. Improve this doc The List is a widely used interface element in almost any mobile app, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.


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>

Nested ion-item does not respect nearest ion-list lines property , Bug Report Ionic version: [x] 4.x Current behavior: When a ion-list is nested .list -ios-lines-full .item { --inner-border-width: 0; } .list-ios-lines-full .item, the immediate child item from a list is this won't work with wrappers, so for� To get the fix first make sure you have the latest version of ionic 4 (npm install @ionic/angular@4.0.0-alpha.10 --save-exact) and then run these two commands ionic cordova plugin rm cordova-plugin-ionic-webview ionic cordova plugin add cordova-plugin-ionic-webview@2.0.0-beta.1 . Thanks!


--ion-item-background-activated is not being applied � Issue #16585 , Bug Report Ionic Info Ionic: ionic (Ionic CLI) : 4.3.1 (/Users/andre/.nvm/versions/ node/v8.11.3/lib/node_modules/ionic) Ionic Framework� Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards <!--t.4.5.4.0-->ionicframework.com


Ionicons: The premium icon pack for Ionic Framework, Bindings need to update, and one-time bindings won't. <ion-content> <ion-item collection-repeat="item in items"> {{item}} </ion-item> </ion-content>� Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards


collection-repeat - Directive in module ionic, <ion-item> <ion-label>Port</ion-label> <ionic-selectable item-content // Required for Ionic 3 only. [(ngModel)]="port" [items]="ports"� In some cases, the Ionic CLI won't know the address with which to configure the Web View, so you may be prompted to select one. Be sure to select the address of your computer on your Wi-Fi network. The following all-in-one command will start a live-reload server on all addresses and deploy the app to an iOS device using Cordova: