Ionic 3 improper scroll behavior

Question

It is difficult to describe this problem, and I'm not sure if this is a mistake, or I just misunderstood some ionic layouts, I also tested only on ios, so I'm not sure about other platforms, so here we go:

I am using ionic 3.19, ios 11.2

If the content in <ionic-content> larger (vertical) than the screen, then if I scroll it up (causing excessive scrolling) or down (also causing skewing) only at the moment I stop touching it - the content does jump to the top look, it is very difficult to describe, here is a way to reproduce: start a new project of ion tabs. Add 15 or so <ion-card> with some text to any tab, so, for example, home.html looks like this:

  <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 so that the content is larger than the screen), launch on iphone ( ionic cordova start ios --device ), scroll down a bit, and then quickly scroll up and pull your finger from the screen while it is still scrolling

Has anyone come across this? I struggled with this for several days, at first I thought it had something to do with my styles, but it can be reproduced using pure ionic functions.

I use only the ion tabs initialization project, modified only by home.html, all scss are in their original ion state

Answer 1

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

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

Answer 2

It seems your problem is unique.

I am trying to create the same problem as you, but I can’t. Anyway, you can try adding this to index.html

  <ion-app style="z-index: 1"></ion-app> 

Answer 3

Add the no-bounce attribute to your <ion-content> element

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