search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.26k stars 2.23k forks source link

Map with globe flickers when using requestAnimationFrame to slowly zoom in #11875

Open avpeery opened 2 years ago

avpeery commented 2 years ago

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

avpeery commented 2 years ago

This is still a Safari issue on main and with the tile fix from https://github.com/mapbox/mapbox-gl-js/pull/11951. Not an issue with Chrome anymore.