IOS7 - Possible memory leak/issue

[droizman]

Working on a phonegap app, testing on iOS7, iPhone5...

I have a tall vertical scroll, about 30k pixels, made up of 320x320@2x (640x640px) images. As i scroll up and down in the list, I'm seeing memory usage going up,up,up until it eventuall crashes.

With iScroll4, the memory seems more stable, but the performance is jerky. With iScroll5, performance is great, memory not so good.

Lots of us are having issues with iOS7, so they've mucked up something in webkit, looking for good solutions around it.

[Stanislas54]

IOS7 more exactly Safari Mobile have big trouble with raf perfs (request animation frame) the 7.1beta 2 don't solve the problem

[cubiq]

I hope infinite (cached) scroll may solve this.

[davidpfahler]

@Stanislas54 Can you post a demo that I can play with? I would like to look for mem leaks myself. So called "infinite" scrolling might help, especially if you can remove the images from the memory after they are out of the viewport.

[jDavidnet]

On a separate internal project I have noticed that scrolling seems to block garbage collection within webkit on iOS. I have yet to find a way to detect the memory usage within the web-app, and or force a garbage collection event.

Requiring a 'pull-to-refresh' or a 'pull-to-page' seems to avoid this problem as scrolling can stop for a few milliseconds and garbage collection can occur.

Recycling DOM elements seems like a really good way to limit DOM Nodes, and Limit Memory Growth, but from what I have seen it seems more like a graphics buffer thing with scrolling than a DOM Node Memory limit.

[davidpfahler]

@jDavidnet Forced garbage collection will slow down the main UI thread and thus impact the scrolling performance. I wouldn't advice it. So called "infinite scrolling" seems the way to go.

[jDavidnet]

@davidpfahler in the same test pattern we used for our other code to crash the browser reliably we have not been able to crash the browser with iScroll. So Well done @cubiq.

@davidpfahler, In the case of trying to avoid a browser crash it seems reasonable to slow down the browser a bit, although I agree forced GC is usually bad.

[labmorales]

I'm working on a phonegap app, and currently testing it on iOS7 with an Ipad 3rd, but even with the infinite scroll the app crashes. Someone have a fix for this problem?

[droizman]

You need to share some more info, ideally

• a snippet of your DOM elements in the scroll to show the complexity
• how many elements are loaded at one time
• are you using any MVC like Backbone along with your data that may be holding onto DOM data even though infinite scroll has swapped them?
• do you use images and are they sized to the screen or are you scaling them dynamically? that seems to cause issues with memory from what i've seen

webkit needs time to breathe before it does its garbage collection. if you are constantly loading in 5 or 10MB worth of data (images get uncompressed before being displayed) you may be triggering the memory limits before garbage collection takes place.

some tips that worked for me:

• if you have complex DOM elements in the infinite scroll - SVG, Canvas, images, shadows, etc. - you should try to load them after the scroller stops. have some intermediate representation during fast scroll like Pinterest does
• slow down the momentum - there usually isn't a good reason to whiz by 50 elements because they are just a blur. ask yourself why there is so much content that the user isn't interested in and whether there is a way to skip or filter some of it [ would be an interesting optimization to skip every n'th elements when scrolling very fast]
• don't run the reorderElements constantly, skip it if the scroller is moving quickly or only every n miliseconds - this would result in fewer but larger DOM swaps

webkit memory is unfortunately voodoo for each OS and version. wish they gave us a 'refresh' method.

On Wed, Apr 2, 2014 at 6:59 PM, André Morales notifications@github.comwrote:

I'm working on a phonegap app, and currently testing it on iOS7 with an Ipad 3rd, but even with the infinite scroll the app crashes. Someone have a fix for this problem?

Reply to this email directly or view it on GitHubhttps://github.com/cubiq/iscroll/issues/507#issuecomment-39405235 .

Daniel Roizman Founder, Hiyu http://gethiyu.com 604-721-2420

[labmorales]

Thanks for the quick and very detailed response. =)

Each item has the following HTML, there are 67 of these itens on a single scroller. HTML BEGIN

Autor(es)

Name of the Author

Titulo

Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text

Ementa

Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text .

Status

• Aprovado para comissão
• Aprovado para plenária
• Aprovado Conamat

HTML END...

I'm using backbone that's most probably the issue. Any tip on how can i fix it? When you say images scaled dynamically, do you mean images with dimensions in percentage?

[droizman]

If your image is larger than the display size, the whole thing is loaded into memory and then scaled to whatever it needs to be displayed as. The full size image is stored in memory AND the display size is stored as well. I believe the same is true of a smaller image that is scaled up. So, pull the correct size image from your server and avoid any duplication and waste. We use cloudimage.io as my CDN and it is incredibly simple to pull any size image from the source. You can then pull the right size image for whatever mobile device and pixel density you need.

For Backbone, you want to just rethink whether it is the right MVC for you. Since iScroll is effectively querying the data and calling the render function, you are not using the View aspect of the Backbone framework. That can still be ok if you are just using the data model and listeners, it just starts to get messy as iScroll is trying to do that as well to a degree. Sorry, no bullet proof recommendations from me on that point just yet....

On Thu, Apr 3, 2014 at 6:07 AM, André Morales notifications@github.comwrote:

Thanks for the quick and very detailed response. =)

Each item has the following HTML, there are 67 of these itens on a single scroller.

Autor(es)

Name of the Author

Titulo

Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text

Ementa

Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text .

Status

- Aprovado para comissão

- Aprovado para plenária

- Aprovado Conamat

I'm using backbone that's most probably the issue. Any tip on how can i fix it? When you say images scaled dynamically, do you mean images with dimensions in percentage?

Reply to this email directly or view it on GitHubhttps://github.com/cubiq/iscroll/issues/507#issuecomment-39448264 .

Daniel Roizman Founder, Hiyu http://gethiyu.com 604-721-2420

[labmorales]

I fixed the problem but don't know exactly what was the cause. I've separated the content in pages of 10 items each, keeping the DOM with only 10 items per page.

I started debugging the memory usage on Xcode it was quite stable on iPad 3 iOS 7.1 and then out of the blue the app crashed. On iPhone 4 same iOS version it worked normally without crashing.

I guess the memory usage spiked really fast and the debugger couldn't show it or it was some WebKit error that crashed the GPU.

I'm only using images in SVG, so I guess that wasn't the issue. I thought of removing backbone and using pure only iScroll for the view but I've got lazy. :/

Em 07/04/2014, às 15:34, kolektiv notifications@github.com escreveu:

If your image is larger than the display size, the whole thing is loaded into memory and then scaled to whatever it needs to be displayed as. The full size image is stored in memory AND the display size is stored as well. I believe the same is true of a smaller image that is scaled up. So, pull the correct size image from your server and avoid any duplication and waste. We use cloudimage.io as my CDN and it is incredibly simple to pull any size image from the source. You can then pull the right size image for whatever mobile device and pixel density you need.

For Backbone, you want to just rethink whether it is the right MVC for you. Since iScroll is effectively querying the data and calling the render function, you are not using the View aspect of the Backbone framework. That can still be ok if you are just using the data model and listeners, it just starts to get messy as iScroll is trying to do that as well to a degree. Sorry, no bullet proof recommendations from me on that point just yet....

On Thu, Apr 3, 2014 at 6:07 AM, André Morales notifications@github.comwrote:

Thanks for the quick and very detailed response. =)

Each item has the following HTML, there are 67 of these itens on a single scroller.

Autor(es)

Name of the Author

Titulo

Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text

Ementa

Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text .

Status

• Aprovado para comissão
• Aprovado para plenária
• Aprovado Conamat

I'm using backbone that's most probably the issue. Any tip on how can i fix it? When you say images scaled dynamically, do you mean images with dimensions in percentage?

Reply to this email directly or view it on GitHubhttps://github.com/cubiq/iscroll/issues/507#issuecomment-39448264 .

Daniel Roizman Founder, Hiyu http://gethiyu.com 604-721-2420 — Reply to this email directly or view it on GitHub.