CSS animation increasing iOS memory significantly

Ionic Framework ionic-v3
1

I was trying to do some flipping card effect in my app:

-webkit-transition: 0.6s

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-transform: rotateY(179deg);
-moz-transform: rotateY(179deg);
-o-transform: rotateY(179deg);
transform: rotateY(179deg);

before adding these, my app using about under 150mb memories.
after adding these, it went up to 500 ~ 600mb which is unacceptable…

I have about 60 cards in a page of an ngFor, perhaps thats really heavy for the device.

any alternatives on how to achieve this without costing that much of memories?
I was trying to let user to flip a card with information on both sides on click.

2

I’e just done something similar to get vocable flashcards. Since it is interesting, what happens when you switch to a 3D transformation with 0 value to make sure the GPU is responsible for the rendering?

In general it is bad design to render 60 cards at once if only 1 is visible and maybe the next one in the background while the flipping animation runs. So how about to have a “renderArray” which always holds 3 cards (prev, current, next) and gets manipulated when the user navigates? This works best if the cards are stacked, if they are among themselves implement a virtual repeat with the same principal.

And what Ionic version are you referencing to? Since here is the Ionic 2 Label and in your other thread you labeled ionic 1.

3

I tried both ionic 1 and ionic 2.

the app I m writting is showing ancient Chinese and Japanese poems.
Unlike English, Chinese and Japanese ancient text does not have line-break and it is to be read vertically.

I have to show translation on each text block at the back of the card.
A chapter of content requires me to show about 60 cards on screen the same time. It is essential for Chinese/ Japanese speakers to study the text blocks / cards side by side to explore the sentence structure.
so… it wasnt ideal to load only 3 cards on screen for sake of the purpose intended, although I understand technically this is bad idea.

I hv a website of the finished product here: http://cow.aforadrian.com
It is produced with Angular Material, and it wasn’t well written becuz it was my first time writing a website.

Now I am trying to reproduce the site as an app on iPhone/iPad with ionic 2.
I completely rewrote the whole thing, now I sort of hv to give up the flipping animation and just do an [opacity] css animation (fade away the card on top and fade in the card behind), this way the whole app runs under 180 MB with 130 MB average memories.

of cuz it will be great if there’s a clever way to implement the flipping effect.

4

Is the CSS code applied on click or on default? It is odd that the memory increases so heavily after adding the lines before doing something.

The first thing I’d try is to use the Webanimations Angular 2 provides. I’m no animation pro but i had pretty good results.

5

the css is triggered on click.

yes it feels odd… I guess I will try out the webanimations with Angular2 soon.

thanks for your reply. i will mark this as solved.
I think the best practice here is to ditch css and dive into webanimation by Angular2.

And I also noticed that in css 3D transform animation, rotateX(angle) takes more memory loading than translate3d(x,y,z) and scale(x,y,z) .