Toggling 3d terrain causes render order issues

[kbrownlees]

mapbox-gl-js version: 2.4.1

browser: Chrome 93 / Firefox 92

Steps to Trigger Behavior

1. Open provided jsbin
2. Wait for 10 seconds while the script disables & re-enables terrain
3. Scroll in / out & move around an observe flashing / render issues. It is possible to get permanent render order issues as per linked screenshot but can be tricky.

Link to Demonstration

https://output.jsbin.com/jiticep

Expected Behavior

I should be able to toggle the terrain layer as many times as I wish and the behaviour should not change.

Actual Behavior

After the terrain layer has been enabled once, disabling it then enabling it again causes render order issues. In the linked example there is a incomplete raster tileset (with lots of partial tiles) which seems to make this issues much more likely to occur. But I have reproduced it with just the satellite layer so I it doesn't seem that is the only reason it occurs.

In our actual application we are updating the map a lot more so we get a consist flicker of the tiles:

Screenshot from jsbin showing ordering issues which don't go away:

[ryanhamley]

This appears to be a regression introduced by #10611