Reply To: Weird Chart Behaviour in IOS Browser on mobile?

[joran]

OK so some further information I found today (I used the safari dev tools panel which includes a canvas tab)

• The initial time a chart is created and rendered it creates 5 canvas elements that are X mb big (where X is something like width x height x 3)
• Every subsequent time that chart.render gets called a new canvas element of X mb is created, is created as far as I can tell none of the earlier ones get garbage collected
• chart.destroy();chart = null had did not release the earlier canvases memory
• I can mostly mitigate it by setting [HTMLCanvasElement].height = 0; [HTMLCanvasElement].width = 0; [HTMLCanvasElement].style.width = 0; [HTMLCanvasElement].style.height = 0 before calling destroy
• I was able to find the following 4 canvases chart.ctx.canvas, chart.overlayCanvas, chart.legend.ghostCtx.canvas, chart._preRenderCtx.canvas
• I was unable to find the 5th canvas element, so one canvas stuck around at X mb … the rest were quite small (~64bytes) after setting width and height to zero

here is the code i used to clean up before calling chart.destroy;chart = null

const ele = document.getElementById("chartContainer");
const c = chartsInstances[chartId]
c.legend.ghostCtx.canvas.style.height = 0;
c.legend.ghostCtx.canvas.height = 1;
c.legend.ghostCtx.canvas.style.width = 0;
c.legend.ghostCtx.canvas.width = 1;
c._preRenderCtx.canvas.width = 1;
c._preRenderCtx.canvas.height = 1;
c._preRenderCtx.canvas.style.width = 0;
c._preRenderCtx.canvas.style.height = 0;
const canvases = ele.querySelectorAll('canvas');
for (const canvas of canvases) {
  canvas.width = 1;
  canvas.height = 1;
  canvas.style.width = 0;
  canvas.style.height = 0;
}