Map with globe flickers when using requestAnimationFrame to slowly zoom in

Nobody has claimed this yet.

**mapbox-gl-js version**: Main branch

**browser**: Any (tested on Chrome and Safari) *update - this now works on Chrome, and is observed with Safari desktop only)

While working on creating release testing pages for globe view, I came across a flickering issue when I attempted to slowly zoom in the 'globe' automatically.

### Steps to Trigger Behavior

1. Set the map with globe, and `zoom` to <= 0.45 (or not setting a zoom) in the map constructor. When initial `zoom` is > 0.45, this bug does not occur.
2. Set up a window.requestAnimationFrame while slowly increasing the zoom on the map (the zoom rate can also be fast and the flickering still occurs).
3. Flicking occurs on bottom half of screen between ~3 - 5 zoom levels

With these steps, the flickering has been consistent.

### Link to Demonstration

https://github.com/mapbox/mapbox-gl-js/blob/avpeery/atmosphere-globe-release-test/debug/flickering-globe.html

### Expected Behavior

Slowly zooming in with requestAnimationFrame should be smooth, no flickering. This expected example is with initial zoom set to 0.46 (bug does not occur >=0.46 initial zoom level)

https://user-images.githubusercontent.com/42715836/167767976-87246cad-e697-4e50-8124-75d1d577e47a.mov

### Actual Behavior
Major flickering occurs on bottom half of screen

https://user-images.githubusercontent.com/42715836/167768057-ebf8f764-0363-4258-b29b-04a69c36c89b.mov

Start with debug/flickering-globe.html and reproduce the issue in Safari using an initial zoom at or below 0.45 while increasing zoom through requestAnimationFrame. Compare the flickering behavior with the initial zoom set to 0.46; done means the lower-half flicker is gone during slow and fast zooming.

Written by the indexing model from the issue text.