Abrupt colorGreenspace changes at zoom level 11

[orennia00ives]

mapbox-gl-js version

v3.19.0

Browser and version

chrome 145.0.7632.117

Expected behavior

There should be less of a color change when zooming at level 11. The transition in v3.9.3 and v3.11.1 seem to have a smooth color fade, while v3.19.0 does not.

v3.9.3.mp4

v3.9.3.over.city.mp4

As a temporary fix, I added a zoom-based interpolation to control the opacity of colorGreenspace

map.on('zoom', () => {

    const transitionZoom = map?.getZoom() ?? 3.5;

    if (baseMapStyle !== 'satellite') {
      const minOpacityValue = 0.25;
      const maxOpacityValue = 0.9;
      const startZoom = 6;
      const endZoom = 11;

      const zoomInterpolationFactor = Math.min(
        1,
        Math.max(0, (transitionZoom - startZoom) / (endZoom - startZoom)),
      );
      const opacity = Number(
        (
          maxOpacityValue -
          zoomInterpolationFactor * (maxOpacityValue - minOpacityValue)
        ).toFixed(2),
      );

      map?.setConfigProperty('basemap', 'colorGreenspace', `hsla(115, 60%, 84%, ${opacity})`);
    }
  });

Actual behavior

The colors change abruptly at zoom level 11. Seems to happen when the map adds more detail.

v3.19.0.mp4

v3.19.0.over.city.mp4

Link to the demonstration

No response

Steps to trigger the unexpected behavior

1. zoom to level 11
2. Zoom in and out where the map adds more detail

Relevant log output

[ibesora]

Hey @orennia00ives we need more information and, ideally, a JSBIn that reproduces the issue.
Which style are you using?

[orennia00ives]

We are using the default standard night mode Codepen you should just have to replace the token to get it to work. You can also see the issue in mapbox studio