feat(g-canvas): fix webkit ios canvas garbage collection bug (#725)

* feat(g-canvas): fix webkit ios canvas garbage collection bug

* feat(g-canvas): 增加 #726 bug单测

Co-authored-by: caoxun03 <caoxun03@kuaishou.com>

packages/g-canvas/src/canvas.ts

@@ -228,6 +228,17 @@ class Canvas extends AbstractCanvas {
   }
 
   skipDraw() {}
+
+  removeDom() {
+    const el = this.get('el');
+    // 需要清理 canvas 画布内容，否则ios下 创建的canvas垃圾未回收，导致Total canvas memory use exceeds问题
+    // 相关问题列表
+    // https://stackoverflow.com/questions/52532614/total-canvas-memory-use-exceeds-the-maximum-limit-safari-12
+    // https://github.com/openlayers/openlayers/issues/9291
+    el.width = 0;
+    el.height = 0;
+    el.parentNode.removeChild(el);
+  }
 }
 
 export default Canvas;

packages/g-canvas/tests/bugs/issue-726-spec.js

@@ -0,0 +1,27 @@
+const expect = require('chai').expect;
+import { Canvas } from '../../src';
+const container = document.createElement('canvas');
+document.body.appendChild(container);
+
+describe('#726', () => {
+  it('Total canvas memory use exceeds xxxMB bug', () => {
+    const canvas = new Canvas({
+      container,
+      width: 600,
+      height: 500,
+    });
+
+    const canvasEl = canvas.get('el');
+    const pixelRatio = canvas.getPixelRatio();
+
+    expect(canvasEl.width).eql(600 * pixelRatio);
+    expect(canvasEl.height).eql(500 * pixelRatio);
+
+    canvas.destroy();
+
+    // 销毁canvas后需要设置宽高为0
+    // 解决ios场景下 canvas无法进行垃圾回收的问题
+    expect(canvasEl.width).eql(0);
+    expect(canvasEl.height).eql(0);
+  });
+});

packages/g-canvas/tests/unit/canvas-spec.js

@@ -129,8 +129,11 @@ describe('canvas test', () => {
   });
 
   it('destroy', () => {
+    const canvasEl = canvas.get('el');
     canvas.destroy();
     expect(canvas.destroyed).eql(true);
+    expect(canvasEl.width).eql(0);
+    expect(canvasEl.height).eql(0);
     expect(dom.childNodes.length).eql(0);
   });
 });