Bug 219780

I have an HTML canvas on-screen that renders using a WebGL context; memory will leak when I resize that canvas’ width and height properties in iOS Safari. This behavior does not happen on any desktop browser.

I made a barebones example using jsfiddle which reproduces the issue on iOS Safari: https://jsfiddle.net/fjbn9qk4/
To render the example at full screen on a device, use this link: https://jsfiddle.net/fjbn9qk4/show

The example automatically resizes a WebGL canvas every 1 second using two different sets of dimensions. Every frame it renders a quad – all I do is call a handful of GL routines to get the quad on the screen (I do not create any new GL objects explicitly after the initial setup).
This issue can also be reproduced if the example is made to simply respond to resizing and I rotate the orientation of the device back and forth from portrait to landscape.

When this sample runs on Safari iOS on an iPad Air 3 running iOS 14.2, Safari page memory usage steadily increases every resize. After letting it run for a while, the browser process gets terminated after it reaches 1.25GB memory. It started at less than 300MB.

If I run this same example in a desktop browser, the memory usage is steady the entire time.

The issue appears to be limited to canvases that use WebGL contexts. Canvases using 2D rendering contexts appear unaffected.

Anyone else seeing this or know of a workaround?

Rendering to an offscreen WebGL canvas and using drawImage() to transport it to an on-screen 2d canvas is a solution, but I see lower performance in some browsers, including iOS Safari.