beta.19 - serious jitter for svg animation

[peterennis]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Jitter on desktop and on android device when deployed.
Initially looks good.
Click on Contacts
Click on Home and the problem is seem

Expected behavior:

Smooth animation like previous versions.
This was ok in beta.17

Steps to reproduce:

Related code:

https://github.com/peterennis/aetabs
https://aetabs.adaept.com

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

[paulstelzer]

I think the problem occurs because your Home tab will be hidden in the DOM, if you switch back to Home, the component becomes active again and so the jitter happens. This not happened in beta.17 and before because the component in the tabs was active all time (so also the animation was active).

Try the following:

ionViewDidLeave() {
 // Deactive the animation / svg here
}

ionViewWillEnter() {
 // Activate the animation / svg here
}

So the svg will stops the animation and if you come back you start it again

More information about the lifecycle hooks: https://medium.com/@paulstelzer/ionic-4-and-the-lifecycle-hooks-4fe9eabb2864

So from my point of view, your issue is not something what we can fix, instead you have to take care of it

[manucorporat]

Indeed it's a bug in your code:
https://github.com/peterennis/aetabs/blob/104d4da37bcb1a6efb9dab884fb74ec2edfe05fb/src/app/home/home.page.ts#L75-L78

ionViewDidEnter can be called many times, use ngOnInit instead of remove the stars in ionViewWillLeave.

[ionitron-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.