mapbox-gl-js
mapbox-gl-js copied to clipboard
mapbox
Potential 1-pixel flickering issue between tiles on darker styles when using globe
This issue was reproducible on a 1x pixel density screen pixel on a dark style (mapbox://styles/mapbox/dark-v10). Some pixels may be rendered incorrectly as white, as they fall on and off outside of the tiles as noticed on this video:
https://user-images.githubusercontent.com/7061573/167017991-e4fd15b6-0db7-4dd5-98cb-e0da762a0b51.mp4
A potential way to solve this would be to slightly extend the tiles with epsilon padding so they overlap to cover this type of rendering artifacts.
Setting the background-color of the map element to a darker colour with CSS helps hide the flickering pixels. This doesn't fix the issue, and if you have a map with high contrast (e.g. black landmasses with white seas) it won't help, but as a stopgap measure it's a much more pleasant-looking solution for darker map themes.
Could another option be to use tile skirts in globe_raster.vertex.glsl, like used for terrain
https://github.com/mapbox/mapbox-gl-js/blob/4130912ec4fa859bae4d033479360c5679aa3db1/src/shaders/terrain_raster.vertex.glsl#L26-L27?
