Rendering issue while scrolling in a Firefox OS app

Question

I have a Firefox OS app that displays images and text of different sizes (Titles and content). The app used to work fine in both simulator and device, but today it started to render oddly every time I scrolled the pages.

The problem is that the images and the text repaint themselves below the original content, making the page a horrible mix of images and text that makes the app unreadable. Here is a screenshot of the issue: Screenshot 1

The other wierd thing is that suddenly the problem stopped appearing after I had disconnect the device and hadn't updated the app in about an hour.

After that, I connected the device to my computer and updated the app with other stuff (commented alert commands that I didn't need and nothing else) and it started again.

The device I'm using is a Peak with Firefox OS 1.2 and I'm using the App Manager to upload the app on the device. The app works with the jQuery libraries and the basic HTML5, CSS3 and JavaScript that are necessary for Firefox OS apps.

What's happening here?

EDIT: I think I've stated my question wrongly, since the problem is that the images and texts don't get erased but the do get repainted when scrolled.

I also noticed that the repainting and no-erasing happens when I load a page and some content takes more time to load than others, so the content that loads first gets repainted below the new one.

I think it might have to do with the frame rate of the screen, but I don't see how I can solve this in my app and not mess with the core of the phone.

Answer 1

I solved it by eliminating a process (loading a Flurry.js script from an iframe) that was being done and was taking a lot of "power" from my device.

I think that executing too many processes at a time may have been the cause of my problem.

At least it's working now :)