[Bug] Color Artifacts When Zooming on Features in MVTLayer

[aemonm]

Description

When zooming in on some features in a MVT Layer, color aberrations and artifacts sometime appear on features.

Notice fill blue color:

How it should look:

This is the code we are using to render the MVTLayer:

    const slicksLayer = new MVTLayer({
      id: BASE_LAYER_IDS.SLICK,
      maxRequests: -1,
      data: slickTilesQuery,
      pickable: true,
      updateTriggers: {
        getLineWidth: [zoom],
        getFillColor: [
          selectedSlickId,
          showSlickOutline,
          showOtherSlicks,
          hoveredSlickId,
          selectedSlickOpacity
        ],
        getLineColor: [
          selectedSlickId,
          showSlickOutline,
          showOtherSlicks,
          hoveredSlickId,
          selectedSlickOpacity
        ]
      },
      getLineWidth: () => {
        if (zoom < 3) {
          return 7;
        } else if (zoom < 5) {
          return 5;
        } else if (zoom < 10) {
          return 2;
        } else {
          return 1.5;
        }
      },
      lineWidthMinPixels: 1,
      lineWidthUnits: 'pixels',
      lineWidthMaxPixels: 20,
      tileSize: 256,
      minZoom: 0,
      maxZoom: 23,
      onClick: handleSlickClick,
      onHover: ({ object }) => {
        if (!object) {
          handleHover(null);
        } else {
          handleHover(object.properties.id);
        }
      },
      getFillColor: ({ properties }: SlickFeature) => {
        if (
          !showOtherSlicks &&
          properties.id !== selectedSlickId &&
          selectedSlickId
        ) {
          return [255, 255, 255, 0];
        }
        if (hoveredSlickId === properties.id) {
          return INTERACTIVE_LAYER_COLORS.SLICK.FILL_SELECTED;
        }
        if (selectedSlickId) {
          return selectedSlickId === properties.id
            ? [
                ...INTERACTIVE_LAYER_COLORS.SLICK.FILL_SELECTED,
                selectedSlickOpacity * 255
              ]
            : INTERACTIVE_LAYER_COLORS.SLICK.FILL_NOT_SELECTED;
        }
        return INTERACTIVE_LAYER_COLORS.SLICK.FILL;
      },
      getLineColor: ({ properties }: SlickFeature) => {
        if (!showOtherSlicks && properties.id !== selectedSlickId) {
          return [255, 255, 255, 0];
        }
        if (hoveredSlickId === properties.id) {
          if (showSlickOutline) {
            return INTERACTIVE_LAYER_COLORS.SLICK.LINE_SELECTED;
          } else {
            return [255, 255, 255, 0];
          }
        }
        if (selectedSlickId) {
          if (selectedSlickId === properties.id) {
            if (showSlickOutline) {
              const [r, g, b] = INTERACTIVE_LAYER_COLORS.SLICK.LINE_SELECTED;
              return [r, g, b, selectedSlickOpacity * 255];
            } else {
              return [0, 0, 0, 0];
            }
          } else {
            return INTERACTIVE_LAYER_COLORS.SLICK.LINE_NOT_SELECTED;
          }
        }
        return INTERACTIVE_LAYER_COLORS.SLICK.LINE;
      }
    });

Flavors

• [ ] Script tag
• [ ] React
• [ ] Python/Jupyter notebook
• [X] MapboxOverlay
• [ ] GoogleMapsOverlay
• [ ] CartoLayer
• [ ] ArcGIS

Expected Behavior

The MVT features should render without any aberrations, artifacts or anomalies.

Steps to Reproduce

1. Visit: https://cerulean.skytruth.org/?zoom=1.5&lat=51.13404944890749&lng=-101.46738938572297&slickId=978163
2. Click on "Zoom To Slick" icon in top right of side panel.
3. Notice the blue coloration in the fill after the zooming completes - it should be transparent.

Environment

• Framework version: [email protected]
• Browser: Firefox/Chrome
• OS: macOS 14.2.1

Logs

No response

[Fabioni]

Maybe related? https://github.com/visgl/deck.gl/issues/8870