Memory leak during CustomSource intensive update in Firefox

[SergeiMelman]

mapbox-gl-js version: 2.10.0

browser: Firefox 106.0.3 (64-bit) (Ubuntu & Windows)

Steps to Trigger Behavior

1. Create a simple custom source
2. trigger layer.update() frequently
3. Memory start to leak instantly ~3-6mb/sec

Firefox affected only so far. Chrome, Safary, MS Edge do not have this issue.

I use CustomSource in an opensource project for weather forecast data visualization: https://metoceanapi.github.io/wxtiles-mbox/ Firefox users reported a browser crash for animated layers.

Link to Demonstration

I have created a minimal possible demo with the same behaviour: https://metoceanapi.github.io/wxtiles-mbox/bug3.html NOTE: I return the same imageData for all new tiles in the demo to avoid aven an operator new in loadTile. I understand the side effects of object sharing (all tiles become the same color). This does not affect the demo in general.

			const imd = new ImageData(1, 1);
			imd.data[3] = 255;

			const customSource = {
				type: 'custom',
				dataType: 'raster',
				id: 'customSource',

				async loadTile(tile, init) {
					imd.data[0] = imd.data[1] = imd.data[2] = Math.random() * 255;
					return imd; 
				},

				update() {}, // reassigned by mapbox

				onAdd() {
					// start Animation
					const nextFrame = () => {
						requestAnimationFrame(nextFrame);
						this.update();
					};
					nextFrame();
				},
			};

			map.on('load', async () => {
				map.addSource(customSource.id, customSource);
				map.addLayer({ id: 'rasterLayer', type: 'raster', source: customSource.id, paint: { 'raster-fade-duration': 0, 'raster-opacity': 0.9 } });
			});

Expected Behavior

FireFox do not crash due to memory leak.

Actual Behavior

FireFox crashes