Skip to content

A suggestion to avoid canvas leak on iOS/Mac safari #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bupthcp opened this issue Oct 12, 2022 · 1 comment
Open

A suggestion to avoid canvas leak on iOS/Mac safari #81

bupthcp opened this issue Oct 12, 2022 · 1 comment
Assignees
Milestone

Comments

@bupthcp
Copy link

bupthcp commented Oct 12, 2022

When I was using Pikaso, I found a canvas leak problem on webbiew/safari of iOS and Safari of Mac and Windows. It's not a bug of Pikaso or Konva-JS, it may be an bad implementaion of iOS webview.
But using pikaso in some way will cause the canvas leak ,and reach the limi of 384M memory of iOS,then no canvas can be operated on the web page.
Let me describe the detail of the problem.

  1. Every konva stage and layer has two canvas. (https://konvajs.org/docs/how_it_works.html) Canvas of a stage can be accessed by stage.bufferCanvas._canvas and stage.bufferHitCanvas._canvas. Canvas of a Layer can be accessed by layer.canvas._canvas and layer.hitCanvas.
  2. When konvajs is running on iOS safari or MAC safari , any change of url will not cause the release of konva canvas. You can have a test on this, and the amount of canvas can be traced by safari inspector (the graphics module). So we need to release the canvas by setting the canvas width and height to 1.
  3. Pikaso has two processes that can cause konva stage clone, so we may also need to manually release canvas in these two process.
    (1) The loading process. The reset function will create a new konva stage, so the elder stage may need to be released manually

(2) The setImageFromUrl function. It will create a history state with a konva stage and a snapshot will be clone from the stage. The snapshot is a local variable, so the canvas of the snapshot will cause a leak.

@raminious raminious added this to the v2.8.0 milestone Oct 12, 2022
@raminious
Copy link
Contributor

Thanks @bupthcp

I found your explanation to be very detailed and interesting. I was not aware of such behavior in Safari. I tried playing with this and totally agree with your description. In the next month, I'll fix that.

2023-02-04.at.1.34.55.-.Coffee.Weasel.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants