Ionic-framework: bug: Ionic v5 swippable modal stutter (noticeable performance drop)

[Exocomp]

Bug Report

Ionic version:
@ionic/angular v5.2.3

Angular version: 9.1.6
MacOS Version: Catalina 10.15.5
Node Version: 10.13.0

Current behavior:
As soon as I add content to the ion-content section (even a single element) I see a major performance drop. During the open modal transition and while swapping there is a noticeable stutter and poor user experience.

NOTE The performance drop is not isolated to the transition animation and swipping. Anything added within the modal has the performance drop as well, for example using ion-slides or any other component.

Expected behavior:
The stutter should not happen.

Steps to reproduce:

• Clone the following example
  
  
  
  • https://github.com/Exocomp/demo-ionic-swippable-modal
  
  
• Deploy to an actual device (I use an iPhone 7 plus)
• On Tab 1
  
  
  
  • Modal 1 has no stutter
  
  
  • Modal 2 has stutter
  
  

NOTE It is not reproducible using the Simulator, you must deploy to a physical device

See example videos:

• No Stutter
  
  
  
  • https://github.com/Exocomp/demo-ionic-swippable-modal/blob/master/video-example/no-stutter.mp4
  
  
• Stutter
  
  
  
  • https://github.com/Exocomp/demo-ionic-swippable-modal/blob/master/video-example/stutter.mp4
  
  

[liamdebeasi]

Thanks for the issue. I am testing this on an iPhone 7 and am unable to reproduce the issue you are describing. Can you please double check you included all the code I need to reproduce the isseu?

[Exocomp]

That's interesting, here are my steps I can reproduce it every time with a new project, I just tried with these steps and reproduced the problem:

• git clone https://github.com/Exocomp/demo-ionic-swippable-modal.git
• cd demo-ionic-swippable-modal
• npm install
• ionic build --prod
• ionic capacitor add ios
• npx cap open ios
• At this point I just use Xcode to deploy (Product -> Run) to the physical deploy

Here is the device about page:

• Software version: 13.5.1
• Model Name: iPhone 7 Plus
• Capacity: 256 GB
• Available: 133 GB

I'm using Xcode version: 11.5(11E608c)

Here is an interesting take. If I don't use ionic components/elements and just use plain html tags with some css then I don't get the performance drop.

I just updated the demo project (https://github.com/Exocomp/demo-ionic-swippable-modal.git) and added a "Modal 3" on tab 1 which shows no stutter - using just plain html tags.

Also I created a new video (link below) which shows all 3 modals which makes it very clear:

• Modal 1 -> No Stutter
• Modal 2 -> Stutter (using ionic elements)
• Modal 3 -> No Stutter (using plain html elements)

https://github.com/Exocomp/demo-ionic-swippable-modal/blob/master/video-example/stutter-2.mp4

Please advise what else I can provide to help reproduce the problem or what else you need from me to help troubleshoot the problem. At the moment this is a blocker for me.

[liamdebeasi]

Thanks for the additional information. I still am unable to reproduce this issue. I tested on the following devices:

• iPhone 5s running iOS 12.4.5
• iPhone 7 running iOS 14 beta 2
• iPhone 11 running iOS 13.5.1

The modal animations/gestures are smooth on all 3 modals tested. This might seem pointless, but does the issue go away if you restart your phone?

[Exocomp]

does the issue go away if you restart your phone?

I had tried it before but just for good measure I just tried again. It's still there.

Would it be possible for you to zip the project after building it add it to https://github.com/Exocomp/demo-ionic-swippable-modal.git? I can do the same if you like if you want to try it packaged up on your side.

[liamdebeasi]

I'm not sure a pre-compiled version of the app would make any difference since we are testing the same source code. Does this performance issue happen in a browser too? Or only in Capacitor?

[Exocomp]

Does this performance issue happen in a browser too? Or only in Capacitor?

I just tried it on Safari on the device and it's happening in the browser also.

[Exocomp]

I hear you regarding the source being the same but if for whatever reason during compilation its picking up some other package, I've attached my compiled www which reproduces the issue:

https://github.com/Exocomp/demo-ionic-swippable-modal/blob/master/www.zip

[bhandaribhumin]

I also face the same issue, why modal is not behaving like native model?

demo

[liamdebeasi]

@bhandaribhumin Are you using iOS 14? Is so, there is a WebKit bug causing that behavior: https://github.com/ionic-team/ionic-framework/issues/21613#issuecomment-648149256 The bug has since been fixed and should be available in an upcoming beta.

[Exocomp]

Right that is a different issue, the issue I have looks like the following (see modal 2):

Demo

[mariusbolik]

This seems to be the same Bug I also have for approximately a month. Here are two Videos: https://imgur.com/a/QMyWV2j
And here you'll find a video showing the bug in Browser: https://github.com/ionic-team/ionic-framework/issues/21560#issuecomment-646961651

[Exocomp]

@mariusbolik Actually that is a totally different issue.

[mariusbolik]

@Exocomp looks exactly like @bhandaribhumin's bug in my eyes. But I'm glad to see that it will be fixed in future versions of Webkit.

[Exocomp]

@mariusbolik

• This is your issue:
  
  
  
  • https://imgur.com/a/QMyWV2j
  
  
  • Your issue is happening with the leave animation
    
    
    
    
    
    • However, the animation is interrupted somehow, it is not stuttering due to performance degradation
    
    
    
  
  
• This is my issue (see modal 2 specifically - modal 1 and modal 3 are perfectly fine)
  
  
  
  • https://imgur.com/a/yGVWSvV
  
  
  • My issue has nothing to do with the leave animation specifically
    
    
    
    
    
    • In my video when I pull down the modal that is me doing it and then I let go and it animates (as it should)
    
    
    
    • The problem is that the animation has poor performance and as it animates it stutters
    
    
    
  
  

Do you now see how completely different the two issues are ?

[bhandaribhumin]

@liamdebeasi Thanks, I am waiting for upcoming release thanks little exited! BTW nice stuff you share at #Ionicconf2020.

[liamdebeasi]

@Exocomp Apologies for the delay. I still cannot seem to reproduce the issue. If the issue is still happening for you, is there any additional information you can provide that can help me reproduce the issue?

[Exocomp]

@liamdebeasi I'll upgrade to the latest versions of ionic & iOS and see if I can still reproduce it, I'll update here once I have the results.

[liamdebeasi]

Fair warning, iOS 14 has a bug in it that is causing issues with the swipeable modal: https://github.com/ionic-team/ionic-framework/issues/21978. You might want to try and upgrade to the latest version of iOS 13 instead.

[Exocomp]

@liamdebeasi thanks for the warning, however end users are going to be upgrading anyway since iOS 14 is now live so have to find out end user experience for myself (thanks for the warning though I appreciate it).

I'm still able reproduce the original issue (same exact behavior) and as you mentioned it is now combined with bug #21978

At the moment I just have one physical device to test it on (same as the first test).

Software version: 14.0
Model Name: iPhone 7 Plus

Ionic:
   Ionic CLI                     : 6.11.8 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.3
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:
   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

System:
   NodeJS : v10.13.0 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS Catalina

A little off topic but I was wondering with Capacitor is it possible to lock the WebView to a specific version or is it broadly at the mercy of iOS upgrades?

[liamdebeasi]

Hey there,

I had a colleague with an iPhone 7 Plus test this, and they were able to reproduce it. Looks like this issue is specific to that kind of device/screen size. I will try to reproduce it on my end.

As for the Capacitor question: Yeah, you are at the mercy of the OS when it comes to the webview version on iOS.

[Exocomp]

@liamdebeasi that's great half the battle is to reproduce it right. I appreciate the effort to figure it out. Also at least now I know it is a specific device issue.

[Exocomp]

Hi there, any luck figuring out this one or a workaround would be great.

[liamdebeasi]

Unfortunately I have not figured out a workaround. I do not have an iPhone 7 Plus and where it is only happening on that device it is hard for me to find a solution. cc @brandyscarney Do you have an iPhone 7 Plus?

[jjrocks1969]

No sorry

On Wed, Nov 11, 2020, 8:28 AM Liam DeBeasi [e-mail] wrote:

Unfortunately I have not figured out a workaround. I do not have an iPhone
7 Plus and where it is only happening on that device it is hard for me to
find a solution. cc @brandyscarney https://github.com/brandyscarney Do
you have an iPhone 7 Plus?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-framework/issues/21760#issuecomment-725453279,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ARWYT6L7IJPXPRSENN6BU2LSPKNRFANCNFSM4O3HNFBQ
.