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 spent the weekend making a simple web page that can quickly show the problem. I have submitted bug reports to Google and Apple. The page brings up a map. You can pan and zoom all you want, and the Safari inspector (running web on iPad, using MacBook Pro to see the canvases) see no canvas.

You can then tap a button and draw one polyline. When you do that, you see 41 canvases. Pan or zoom, and you'll see more. Each canvas is 1MB, so after you have 256 of the orphaned canvases, errors start as the canvas memory on the iPad is full.

Reload the page, tap a button to place one polygon, and the same thing happens.

Equally interesting is I added buttons to style the map for day and night. You can go back and forth when it's just a map (or a map with only markers, there is a button to display some markers on the map). No orphaned canvases. But draw a line, and then when you change the styling, you see more orphaned canvases.

Looking at Safari on the MacBook in the Active Monitor, the size just keeps going as you pan and zoom around the map after drawing a poly*

I hope Apple and Google can figure it out and not claim that it is the other company's problem. All this changed with IOS12 running web pages that have been stable for years, and that still work on IOS 9 and 10 iPads I keep for testing to be sure that older devices can show the current web pages. Hope this test/experiment helps.