Ionic 3 incorrect scroll behavior

Question

It's hard to describe this problem and I'm not sure if it's a bug or i just misunderstood some ionic layouts, also i've tested only on ios so not sure about other platforms, so here we go:

I am using ionic 3.19, ios 11.2

If content in <ionic-content> is bigger(vertically) than screen, then if i scroll it upwards(causing overscroll) or downwards(also causing overscroll) just the moment i stop touching it - content makes a jump to the top of the view, it's really hard to describe, here is way to reproduce: start new ionic tabs project. Add 15 or so <ion-card> with some text to any tab, so for instance home.html looks like:

    <ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header>Header</ion-card-header>
    <ion-card-content>Body</ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>Header</ion-card-header>
    <ion-card-content>Body</ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>Header</ion-card-header>
    <ion-card-content>Body</ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>Header</ion-card-header>
    <ion-card-content>Body</ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>Header</ion-card-header>
    <ion-card-content>Body</ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>Header</ion-card-header>
    <ion-card-content>Body</ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>Header</ion-card-header>
    <ion-card-content>Body</ion-card-content>
  </ion-card>
</ion-content>

(just to make sure content bigger than the screen), run on iphone(ionic cordova start ios --device), make a little scroll down, and then fast scroll up and put the finger off the screen while it's still scrolling up

Have anybody encountered this? I've been fighting this for days now, at first i thought it has something to do with my styles, but it could be reproduced with pure ionic features

I am using just the starter ionic tabs project, changed only home.html, all scss are in the initial ionic state

Answer 1

Try wrapping your items with <ion-list></ion-list>

<ion-content padding>
    <ion-list>
        Your cards here...
    </ion-list>
</ion-content>