Animation and Memory leak, what is best approach?

I am doing some card flipping information with css, perhaps a lot.
on ionic v1, I hv to give up on it becuz memory leak makes it crashes on devices.

now I am on ionic v2,

is the issue improved, or are there better ways to implement animations?

and, bear with me, instead of running in ios emulator, is there a way to check memory leak/usage on chrome browser? I hv opened the developer-> performace tab on chrome, but not so sure what to look into to know if memory exceed iphone allowance (i couldnt find the number of over all memory usage to compare it to iphone allowance).

I dont think doing so much animation in a hybrid app is a good idea.
At the end, you may get your result correct in some phone. but in other phones the app may crash.
This is one of the reason why native app is better than hybrid.

If you want to do a lot of animation you can build a simple native app and add small patches of webview. I haven’t tried that yet, but I will soon.

thx for your reply.

i understand that, but i m stuck with ionic now so i hope it can be achieved.

I hv cards loading up in a row, and wanted to flip them on click.
at first it doesnt sound like heavy animation (card flipping), until i test it on a real iphone.
now, i want to try and see just how bad it is.

a side note: i find css shadow must be avoided, it is the main reason that crashes my app when i did on ionic1. I am not using css shadow now and just want to make flipping card animation possible, if viable.

I dont have a mac with me most of the time, so is it possible to check how many memory is used when the app is loaded on chrome, so to roughly compare it with the limitation of iphone for possible memory leak?

You should be able achieve most kinds of animations whilst still being able to perform well. The best way to check that your animations aren’t doing anything to nasty is to use the ‘Performance’ tab and check out the CPU graph and the ‘Main’ thread in the dropdown.

You will want to avoid triggering ‘Layouts’ wherever possible, so if your animation is causing lots of those in the ‘Main’ dropdown then that’s probably an issue. If you can, stick to animating things that are only going to trigger the Composite step in the browser - which basically means using opacity or transforms.


in iOS emulator, I remember there’s a tab that show the number of just how many memory is used in real time, and I can compare that to the memory allowance.

on chrome however, I m lost with all these charts, can you kindly explain a bit, what should i be looking to get the number of memory usage at peak? is the JS-Heap[range] showing the highest and lowest memory used?

Yes - the JS Heap shows the portion of memory that Javascript is occupying. Using too much memory can lead to a crash but I don’t think your CSS animation has anything to do with that. If you want to debug the animation performance, just record a section of you performing the action and then highlight a small portion of when the animation is executing in the timeline.

thx, i hvnt apply the css animation yet so the screenshoot i uplaoded shouldnt be showing anomaly yet :joy:

So i will compare the JS Heap highest number to the amount of memory allowed by various ios devices, to roughly guess if it is acceptable to run.

THANKS :heartbeat: