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.24k stars 2.23k forks source link

Applying too much bottom padding in globe projection renders a circle around the globe #12636

Open AndreasHogstrom opened 1 year ago

AndreasHogstrom commented 1 year ago

After applying enough bottom padding in globe view, a donut shape appears on the globe, leaking the background color of the page. This only seems to happen with bottom padding and seems to occur when enough of the globe goes outside the viewport.

Screenshot 2023-03-31 at 08 42 09

mapbox-gl-js version: 2.13.0

browser: Tested on Chrome 111, Safari 16 mac & iOS, Firefox 111,

Steps to Trigger Behavior

  1. Set projection to globe
  2. Increase bottom padding until issue appears

Link to Demonstration

https://jsfiddle.net/jhesk35c/

hiebj commented 2 months ago

From the bottom of my heart, thank you for pointing out that the color which becomes visible around the globe is the document background color.

From that, I was able to implement a satisfactory workaround, which was simply to change the document background color to match the color of the sky where it is closest to the globe. Possibly an even better job could be done using a radial gradient but a single color seems to work just fine and is hardly noticeable on any device.