Nativescript: Repeating CSS Animations on Android cause memory leak and eventual app crash

Created on 30 Oct 2017 · 9Comments · Source: NativeScript/NativeScript

Tell us about the problem

CSS Animations on Android cause memory leak and eventual app crash.

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

CLI: 3.2.0
Cross-platform modules: 3.2.0
Runtime(s): 3.2.0

CSS contains:

@keyframes spin {
    from { transform: rotate(0); } to { transform: rotate(360); }
}
.spin {
    width: 96;
    height: 96;
    margin: 24 24 24 24;
    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

HTML file contains:

<Image` class="spin" src="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png"></Image>

Repeat this image many times to speed up the rate of memory leak.

Sample project is here:

https://play.nativescript.org/?id=dyHzYijQj00WnWds4bo40&template=play-ng

If the animation duration is set to a really long time, this slows down the rate of memory leak, so I believe this has something to do with the animations being repeated. For example:

@keyframes spin {
    from { transform: rotate(0); } to { transform: rotate(360000); }
}
.spin {
    width: 96;
    height: 96;
    margin: 24 24 24 24;
    animation-name: spin;
    animation-duration: 1000s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

This is potentially related to issue https://github.com/NativeScript/NativeScript/issues/3901 which was fixed in 2.1.

backlog android

Source

tbsf

Most helpful comment

Already reported this here : https://github.com/NativeScript/NativeScript/issues/5731

RoyiNamir on 14 May 2018

👍2

All 9 comments

HI @tbsf,
Thank you for reporting this problem.
I tested this case on my side and was able to recreate the behavior with the slowing down the animation and the app crash. This problem is reproducible also on non-Angular project. Please keep track on the issue for further info.
Archive.zip

tsonevn on 31 Oct 2017

I'm facing the same issue, any update or idea how to workaround?

Buuhuu on 28 Nov 2017

Hi @Buuhuu,
This issue is still under review and at this time there is no workaround that could be used. At this point, I would suggest keeping track on the issue and we will update its status when we have further info about the case.

tsonevn on 28 Nov 2017

@Buuhuu see my last example for workaround. You can increase the duration as well as the degree transformation, i.e. 360 degrees/1 sec is the same transformation rate as 360000 degrees/1000 sec but the second will only repeat every 1000 seconds. You can use 1,000,000,000 and this will mean your animation repeats every 31 years, which is very unlikely to cause a leak that actually crashes the app.

tbsf on 28 Nov 2017

😕2 👍1

I am facing the Same Issue with Android and NativeScript v. 3.3.0. If i comment the css it just runs normally>>

@keyframes blink {
    0% {
        opacity: 1;
    }
    25% { 
        opacity:0.5;
    }
    50% { 
        opacity:0;
    }
    75% { 
        opacity:0.5;
    }
    100% { 
        opacity:1;
    }
}

.in-page{
    animation-name: blink;
    animation-duration: 1;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}