Rendering artifacts around style sheet zoom limits + terrain

[matteiben-onx]

After adding terrain to the map, a tile rendering issue is present when at the minzoom style boundary with another styled source rendering behind it.

Something like this:

• Add terrain source
• Add terrain
• Add streets stylesheet
• Add another layer with minzoom of 4
• Set map to zoom level 4

It seems some tiles render, while some don't. The rendering artifacts change as the camera is panned around.

If terrain isn't added, rendering bug is absent.

Example:

https://user-images.githubusercontent.com/103519761/164488718-3e022ede-a1f9-42f1-ab7a-82fbfe2a32b4.mov

mapbox-gl-js version: v2.8.1

browser: Chrome

Steps to Trigger Behavior

1. Serve map from gist link below
2. Rendering issue should present on map load and change depending on panning

Link to Demonstration

Gist example: https://gist.github.com/matteiben-onx/7db4f26faa03d308f6a43b79e68d613d

Expected Behavior

In this particular case, I would expect the layer with the minzoom to render. According to the spec, minzoom is inclusive.

At zoom levels less than the minzoom, the layer will be hidden.

Actual Behavior

Some tiles render, some don't.

[matteiben-onx]

This rendering bug is only present right at tile boundaries with terrain present.

A workaround to this issue is changing zoom levels from 4 -> 3.9 or 4.1. The rendering bug is still present, just not obvious as a first impression.

[SnailBones]

This is the same as https://github.com/mapbox/mapbox-gl-js/issues/11811, but for terrain instead of globe.

When terrain is on the map, tiles closer to the camera center are rendered at a higher zoom level. Since minzoom is evaluated on a tile-by-tile basis, when tiles of different zoom levels appear onscreen some of them will be missing the tile.

A workaround is to remowe the minzoom and using data driven styling to create the same effect. The next version of Mapbox bathymetry will be starting at z0 so will not face this issue.

[MoustafaWehbe]

It appears that both this issue and the one mentioned as 11811 continue to persist. When using the globe projection and zooming in to view the globe, dragging the map towards the north or south poles causes the layers and tiles to disappear from the map.

Here's a brief example to illustrate the situation.

https://github.com/mapbox/mapbox-gl-js/assets/18680770/a909eb3b-6395-45e0-8150-790949c4f696

Code:

var map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/streets-v11",
    center: [5, 46],
    zoom: 3,
    projection: "globe",
    minZoom: 2.2,
});

map.on("load", function () {
    map.addLayer(
        {
            id: "country-boundaries",
            source: {
                type: "vector",
                url: "mapbox://mapbox.country-boundaries-v1",
            },
            "source-layer": "country_boundaries",
            type: "fill",
            paint: {
                "fill-color": "green",
                "fill-opacity": 0.4,
            },
            minzoom: 3,
        },
        "country-label"
    );
});

Has anyone been able to discover a solution or identify the root cause behind this issue? @matteiben-onx @SnailBones

[matteiben-onx]

@MoustafaWehbe No solution discovered. However, I have made changes to avoid defaulting users to tile zoom boundaries, making the rendering bug less likely to encounter.

[nickkieffer]

+1, thread bump. Anybody progress on this?