I’m building a SPA (vue js + vue router) combined with some pixi js (v4.8).
The main features I use are :
- image sprites
- video sprites
- some pixi texts
- displacement filters
Depending on the view, there may or may not be a canvas/renderer. But I always cleanup after myself before switching views by :
- destroying every sprite and their baseTexture (image, video, filter sprite) -> .destroy(true)
- destroying every text and their baseTexture -> .destroy(true)
- clearing any filters used -> container.filters = null
- and finally destroying the main renderer -> renderer.destroy(true)
By doing so, my SPA is running smoothly (chrome, firefox, edge), no matter how many view switches occurs, and I don't get any console errors.
However, safari (12.0.3 in my case) simply doesn't seem to take any cleanup seriously, after 4/5 views switching the performance drastically drops and I get many console errors : _There are too many active WebGL contexts on this page, the oldest context will be lost._ and _WebGL: INVALID_OPERATION: loseContext: context already lost_ . And if we continue browsing between views, safari will be forced to crash. Even if I manually try to kill my renderers with _gl.getExtension('WEBGL_lose_context').loseContext()_ , the problem remains.
Am I missing something or is it just the way Garbage Collection works in safari (being less effective, and not properly releasing memory)?