Home Forums Report Bugs Weird Chart Behaviour in IOS Browser on mobile? Reply To: Weird Chart Behaviour in IOS Browser on mobile?


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;