Heatmap with a large number of small clusters "flickers" when the map position is changed

[moneyatbo]

mapbox-gl-js version: 1.12.0

browser: Chrome 84.0.4147.135 (Official Build) (64-bit) (Mac, Linux, Windows)
Edge 84.0.522.63 (Official build) (64-bit)
IE 11.450
Safari Version 13.1.2 (15609.3.5.1.3)

Steps to Trigger Behavior

1. Load page in the jsbin
2. see the heatmap rendered over San Francisco
3. with your mouse click and hold on the map
4. now move the mouse to the left, right, up or down
5. Notice that the heatmap does not render in the same locations as you pan.

Link to Demonstration

https://jsbin.com/zodewehiwa/edit?html,output

Expected Behavior

Consistent position of the heatmap clusters when panning over the map

Actual Behavior

Heatmap clusters migrate on the map as you pan.

I converted the Data Driven Circles example to be a heatmap to illustrate the problem we are seeing on our maps. https://docs.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/

[mourner]

Yeah, duplicate of #5563. Heatmaps are rendered through a 16x downscaled framebuffer for performance, which probably causes the flickering due to lost information, but there may be a way to fix this without compromising performance — needs investigation.

[moneyatbo]

@mourner How easy is it to adjust the framebuffer if we forked the lib?

[mourner]

@moneyatbo I don't know. But if you do find a fix, we'll welcome a pull request!