[Bug] Color Artifacts When Zooming on Features in MVTLayer

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
• 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: deck.gl@8.9.19
• Browser: Firefox/Chrome
• OS: macOS 14.2.1

Logs

No response

Start with the MVTLayer rendering path and its MapboxOverlay integration, using the linked reproduction to observe the artifact while zooming. Compare the result with the expected transparent fill; done means the reproduced features render without color aberrations or other artifacts.