Memory leak in Safari/Webkit

[Qinxgee]

I'm currently hunting down an issue with a game that we have developed with pixi.js: According to the dev tools in Chrome, the game uses about 53MB memory. On FireFox it uses about 73MB. On Safari it uses anything between 1800 and 3500MB. On an iPad with iOS12 the game crashes before it even starts, both on Safari and Chrome. As I understand it, Chrome on iOS uses webkit (as apposed to chromium?), so I suspect there is something wrong with webkit. But I could be wrong, I haven't really had a need before to dive into that.

Has anyone else experienced memory issues when using pixi on Safari?

I have been trying to use the Safari Web Inspector's Timeline recorder, but it doesn't tell me much - likely because I'm not 100% sure what I'm looking at. It says that the java heap is around 600MB, the 'layers' take up around 1GB and the 'page' another 1GB. Both of these last ones can also go up to 1.5GB, and sometimes go down to about 800GB (I'm guessing when pixi's GC kicks in). I'm not sure what the 'layers' are, the 'page' is 'everything else' (graphics, audio, etc.).

If someone knows about a good reference of how to 'read' the information supplied by the web inspector, that would also be greatly appreciated!

[ivan.popelyshev]

Pixi gc is pure texture GC, and it just kicks out old textures that weren't used for a long time from GPU memory, not from js heap.

Its the first time I hear a bug like this. Need an actual demo.

[jonforum]

2 hours ago, Qinxgee said:

If someone knows about a good reference of how to 'read' the information supplied by the web inspector, that would also be greatly appreciated!

the only tuto i know about this is the official tutorial, but you maybe already look at.
https://developers.google.com/web/tools/chrome-devtools/memory-problems/

[ivan.popelyshev]

Try turn targetFPS in pixijs to 1 or 2 and look in debugger

 

[Qinxgee]

12 hours ago, jonforum said:

the only tuto i know about this is the official tutorial, but you maybe already look at.
https://developers.google.com/web/tools/chrome-devtools/memory-problems/

Yeah, we have looked at that when dealing with other memory leaks that we actually were able to solve. For Safari, there is a similar page about the Web Inspector: https://support.apple.com/guide/safari-developer/welcome/mac 

It's pretty good at explaining how to debug JavaScript but doesn't seem to go into a lot of detail on what's in the "page" and "layers" chunks of the memory.

[Qinxgee]

11 hours ago, ivan.popelyshev said:

Try turn targetFPS in pixijs to 1 or 2 and look in debugger

 

Am I looking for something specific? I've set PIXI.settings.TARGET_FPMS to 0.002 (so 2 FPS) but it doesn't seem to affect the game a whole lot, in either direction.

[Qinxgee]

15 hours ago, ivan.popelyshev said:

Pixi gc is pure texture GC, and it just kicks out old textures that weren't used for a long time from GPU memory, not from js heap.

Its the first time I hear a bug like this. Need an actual demo.

Although I do think that the heap for our game is on the high side, the problem seems to be mostly in the 'layers' and 'page' parts of the memory though, and from what I understand, the 'page' section of the memory should contain the textures.

I would love to give a link to what we have but the game is not open source, not released yet, and kind of a big deal for our company/market ?

I did check other games that we made but although the memory use is pretty high for them as well, it's not so bad that it crashes the game (on iPad) or that Safari starts warning me about overal performance of the computer (on my MBP).

[Qinxgee]

Sorry to be spamming, I should have put all this in one reply ?

How does the texture loading work? Is there any particular reason why preloading 18MB (on disk) worth of textures makes the memory use increase by over 2GB? The 'page' part increases by close to 1 GB, and the 'layers' part of the memory goes from practically nonexistent to 1.26 GB.

This line of code does it:

    private static preLoadTextures(resource: PIXI.loaders.Resource) {
        if(resource.texture && app.renderer instanceof PIXI.WebGLRenderer) {
            const texture = resource.texture.baseTexture;

            app.renderer.textureManager.updateTexture(texture);
        }
    }

That is called for every resource that is returned in pixi's loader.load callback function.

[ivan.popelyshev]

> I would love to give a link to what we have but the game is not open source, not released yet, and kind of a big deal for our company/market ?

I can sign NDA, but usually I ask money for that.

> How does the texture loading work? Is there any particular reason why preloading 18MB (on disk) worth of textures makes the memory use increase by over 2GB?

Easy. 100 empty 4096x4096 files. = 6.4GB in videomemory , because 4 bytes per pixel. Its costs nothing in PNG.

That's the only idea I have for your case

[Qinxgee]

46 minutes ago, ivan.popelyshev said:

Easy. 100 empty 4096x4096 files. = 6.4GB in videomemory , because 4 bytes per pixel. Its costs nothing in PNG.

 

Well... not a memory leak then... we have 66 textures that we load, all 2048x2048, and a mix of jpg and png. So there's our gigabyte of data.

So then the question becomes why Chrome and Firefox have no issue and Safari throws up almost immediately.

I found this old article on stack overflow: https://stackoverflow.com/questions/22039534/ios-browser-crashes-due-to-low-memory

It's from 2014, so I assume some of the conditions have changed since then, but the interesting bit is in the JavaScript execution time. Is that still limited to 10 seconds in iOS12 as far as anyone knows? And what is considered 'executing', because obviously our games are all full javascript and they 'execute' continuously, way in excess of this supposed 10s limit. Having set that, counting the seconds until the game crashes on iPad, it's almost exactly 10s in... 

Edited July 25, 2019 by Qinxgee