lundi 20 avril 2015

Using CSS3 transition in Cordova/Phonegap Webkit browser results in a memory leak

I have a Cordova 3.3.1 app running on Android 4.0.4 which displays images in a loop at 15 second intervals. I've currently implemented a crossfade solution as shown here: http://ift.tt/1F7t4vd. This solution relies on two images layered in the same position, and the opacity of the top image changes from 0 to 100 (and vice versa) with each 15-second interval.

Strangely I have found that if I include a CSS transition, the Cordova app will cause the device's memory to decrease over the course of an hour, and eventually the app will crash. Here is the CSS I'm using:

.ad-image:last-child {
    -webkit-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out;
}

I'm absolutely sure this is causing the problem, as when I simply remove just these lines of CSS, the app works fine with no memory leak. And when I add the lines back, the memory leak comes back -- repeatably.

Does anyone have any ideas why this memory leak is happening? Is it a Webkit bug? Or maybe something related to my implementation (please see the jsfiddle)?

Aucun commentaire:

Enregistrer un commentaire