Ионное 3 неправильное поведение прокрутки

Трудно описать эту проблему, и я не уверен, что это ошибка, или я просто неправильно понял некоторые ионные макеты, также я тестировал только на ios, поэтому не уверен в других платформах, поэтому здесь мы идем:

Я использую ионный 3.19, ios 11.2

Если содержимое в <ionic-content> больше (по вертикали), чем экран, тогда, если я прокручиваю его вверх (вызывая чрезмерную прокрутку) или вниз (также вызывая перекос) только в тот момент, когда я перестаю прикасаться к нему - содержимое делает прыжок на вершину взгляд, это очень сложно описать, вот способ воспроизвести: начать новый проект ионных вкладок. Добавьте 15 или около того <ion-card> с некоторым текстом на любую вкладку, так что, например, home.html выглядит следующим образом:

    <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>

(просто чтобы содержимое было больше экрана), запустите на iphone (ionic cordova start ios --device), немного прокрутите вниз, а затем быстро прокрутите вверх и вытащите палец с экрана, пока он еще прокручивается

Кто-нибудь сталкивался с этим? Я боролся с этим в течение нескольких дней, сначала я думал, что это имеет какое-то отношение к моим стилям, но оно может быть воспроизведено с использованием чистых ионных функций.

Я использую только проект инициализации ионных вкладок, измененный только home.html, все scss находятся в исходном ионном состоянии

Ответ 1

Попробуйте обернуть свои вещи с помощью <ion-list></ion-list>

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

Ответ 2

Похоже, ваша проблема уникальна.

Я пытаюсь создать ту же проблему, что и ты, но не могу. В любом случае, вы можете попробовать добавить это в index.html

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

Ответ 3

Добавьте атрибут no-bounce в свой элемент <ion-content>

<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>