NativeScript: Memory leaks with CSS animation

From @RoyiNamir on April 20, 2018 6:33

I’ve created a simple new project via tns create bbb --ng

Added a CSS animation class via animate.css library :

app.css

@import '~nativescript-theme-core/css/core.light.css';
@import "~animate.css/animate.min.css";

.breath {
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

And now I’ve created 7 images with that class. Some with manual images and some are via *ngFor :

This is the code for items.component.html

<ActionBar title="My App" class="action-bar"></ActionBar>
<GridLayout columns="*,*,*,*,*,*,*" rows="*">

    <StackLayout row="0" col="1"  >
        <Image class="breath " [src]="'~/images/hat00001.png'" stretch="aspectFit"></Image>
    </StackLayout>

    <StackLayout row="0" col="2"  >
        <Image class="breath " [src]="'~/images/hat00001.png'" stretch="aspectFit"></Image>
    </StackLayout>

    <Image *ngFor="let o of [1,2,3,4,5];let i = index;"
           [col]="i+3"
           [class]="'breath'"
          verticalAlignment="top"
           [src]="'~/images/hat0000'+(i+2)+'.png'"
           stretch="aspectFit"></Image>
</GridLayout>

There’s nothing else. No TS code , no nothing. Just this html and css.

However , while writing down this issue ^ , look at the memory consumption :

Started at :

And now it’s (keeps growing) :

Attached project : https://ufile.io/spicc

Video showing the ease growing leak :

video_2018-04-20_093614

Worth to mention: I’m not talking about the jumps. I’m talking about the easy growing memory consumption

Eventually the app is shutdown due to out of memory

Additional info :

Update: after 51 min - it’s 0.2 GB :

This bug hurts the ability to use NS with games/continuous animations (said to be supported with css animations). 😦 Any workaround ? BTW it also happens with Angular animations. ( i’ve created a test and still there’s also a leak with Angular animations).

Copied from original issue: NativeScript/nativescript-angular#1291

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (6 by maintainers)

Most upvoted comments

Tested on my side via this application and Android profiler and the memory leak is now fixed.

@RoyiNamir @jogboms can you guys test with your own applications and verify that the fix is resolving the issue for your scenarios as well. (at this very moment the fix is in the master branch meaning you will need npm i tns-core-modules@next for testing)

NickIliev on Jul 4, 2018

Update: it seems that changing the animation count from infinity to some large number is causing larger memory leak

.breath {
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: 100000;
    animation-fill-mode: forwards;
}

NickIliev on Apr 25, 2018

@RoyiNamir this will be released officially as a patch version. It is also available in tns-core-modules@rc and tns-core-modules@next. You can take a look at the fix for more specific info related to the issue.

ADjenkov on Feb 25, 2019

Hello, I’ve observed this memory leak again. Using the same kind of app as the one mentioned earlier, I’ve witnessed a 10mb memory usage increase over 5 minutes using the Android profiler. Could someone confirm I’m not mistaken ?

I was using “tns-core-modules”: “~6.3.0” and “nativescript-angular”: “~8.20.3”

mmeven on Jan 29, 2020

@RoyiNamir thank you for reporting this issue and providing the detailed description and information. I can confirm that indeed the issue is reproducible and the memory leak is also observed in NativeScript Core application (--tsc).

Steps to reproduce:

use the above Angular application or this one (Core with TypeScript)
this is the used animation
run the Android profiler and observe the Memory raising over the time

NickIliev on Apr 24, 2018