Ionic-framework: bug: in ios device with os 14 beta, content with tag 'ion-card-subtitle' jumps when scrolling

[ronanjia]

Bug Report

Ionic version:


[ ] 4.x
[x] 5.x

Current behavior:

NOTE: iPhone XS with IOS 14 beta.3/4 has this issue, but iPhone 7 plus works fine.

content jump with card-subtitle

scroll smooth without card-subtitle

Expected behavior:

content scrolls smooth

Steps to reproduce:

With ion-card-subtitle in ion-content, content jumps when scrolling

Related code:

<ion-content fullscreen class="ion-padding" [scrollY]="!showBackdrop">
  <ion-card>
    <ion-card-header>

      <!-- content jumps when scrolling with card subtitle  -->
      <ion-card-subtitle>sub</ion-card-subtitle>

      <ion-card-title>title</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      123
    </ion-card-content>
  </ion-card>
</ion-content>

Other information:

Not sure if related to #21613

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.0
   Ionic Framework               : @ionic/angular 5.3.0
   @angular-devkit/build-angular : 0.901.11
   @angular-devkit/schematics    : 9.1.11
   @angular/cli                  : 9.1.11
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.2.1
   @capacitor/core : 2.2.1

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   NodeJS : v10.16.0
   npm    : 6.11.1
   OS     : macOS Catalina

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[ronanjia]

Hi @liamdebeasi , i put a new starter ionic project on Github here, and the bug seems to exist on my iPhone Xs (ios 14 beta.4)

Produce:

1. start new app with capacitor

ionic start App blank
ionic build
ionic cap add ios

1. deploy to iPhone in Xcode
   

With ion-card-subtitle commented out, it works fine!

<!-- <ion-card-subtitle>sub</ion-card-subtitle> -->

CODE Location: https://github.com/ronanjia/TransBug-on-ios14b4/blob/79b4bbbc96cd1f0b21f420c584ba85218b8fc716/src/app/home/home.page.html#L18

Ionic Info

Ionic:

   Ionic CLI                     : 6.11.0
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.901.12
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.3.0

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   NodeJS : v10.16.0
   npm    : 6.11.1
   OS     : macOS Catalina

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of https://github.com/ionic-team/ionic-framework/issues/20932#issuecomment-608527041.

[ronanjia]

Hi Liam, thanks for your quick reply, i will keep track at the webkit issue, by far turn off transform works fine.

[ronanjia]

Hi @liamdebeasi , i'm having another _SwipeBack_ problem which i'm not sure whether it is related.

Current behavior:
As you can see blow, when i navigate to office page, then swipe back to home page;

1. It works fine when i swipeback
2. If i drag the side of page slowly to somewhere near middle of the viewport then release finger, the office page seems to jump to the middle of the viewport first, and then start to move away;

Expected behavior:
It should move directly form the position that the finger just released

CODE Location: https://github.com/ronanjia/TransBug-on-ios14b4/blob/68120483ba671ae306fe860f45056fd2fb0013ff/src/app/home/home.page.html#L23

Help please~

[liamdebeasi]

That is an existing iOS 14 bug. The WebKit team has fixed it, but the patch has not been released yet.

[ronanjia]

That is an existing iOS 14 bug. The WebKit team has fixed it, but the patch has not been released yet.

Thanks a lot!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.