Total canvas memory use exceeds the maximum limit (Safari 12)

Question

We are working on a visualization web application which use d3-force to draw a network on a canvas.

But now we’ve got a problem with browsers on iOS, where the proces

Answer 1

I can confirm this problem. No change to existing code that worked for years. However, in my case, the canvas is drawn only once when the page is loaded. Users can then browse between different canvases and the browser does a page reload.

My debugging attempts so far show that Safari 12 apparently leaks memory between page reloads. Profiling memory consumption via Web Inspector shows that the memory keeps growing for each page reload. Chrome and Firefox on the other hand seem to keep memory consumption at the same level.

From a user perspective, it helps to simply wait 20-30 seconds and do a page reload. Safari clears memory in the meantime.

Edit: Here's a minimal proof of concept that shows how Safari 12 leaks memory between page loads.

01.html

02

02.html

01

Steps to reproduce:

• Upload both files to a webserver
• Click the link on top repeatedly to switch between pages
• Watch Web Inspector memory consumption go up for every page load

I submitted a bug report to Apple. Will see how this works out.

Edit: I updated the dimensions of the Canvas to 10000x1000 as a better proof of concept. If you now upload both files to a server and run it on your iOS device, if you rapidly switch between pages, the Canvas won't be drawn after several page reloads. If you then wait 30-60 seconds, some cache seems to be getting cleared and a reload will again show the Canvas.