IconLayer disappears after a few redraws in deck.gl 8, regression from version 7

[ruizmarc]

Description

We are using IconLayer to represent live data with auto packing atlas (we generate a hundred different icons depending on the data we receive). Everytime we receive an event with updated data, we set props with an updated layer and we get the changes represented in the map.

We have noticed that sometimes icons stop rendering properly and instead of showing an icon, it shows nothing (completely transparent). However, if I click where the icon is suposed to be I get the event. (we haven't found a reproducible pattern, but it happens frequently).

We don't get any error on the console, even if we set log level to 3 or higher.

It happened something similar with black squares instead of disapering icons in the past: #3875. I was told it happened because I exceded the texture size, and indeed that was the problem. For this reason I reduced the size of the icons, so they fit into the texture and everything was working with version 7.3.6. However, since I upgraded to 8.0.6. I'm getting this disapering icons problem. I don't know if it is related with my previous issue, but it seems a regression from version 7 to 8.

Repro Steps

It is reproducible in any browser and OS.

First time data is drawn properly, but after navigating through the map zooming in and out or changing bounds (which causes generating new icons), it eventually stops drawing icons without leaving any crash log.

Notice that when zoom is changed or bounds are changed, data is updated.

We update the layer info, using set props like this:

this.overlay.setProps({ layers: [ clustersLayer.clone({ data: clustersData }) ]});

This is how we generated the IconLayer:

    const clusterSize = 124;
    return new IconLayer({
      id: 'icon-cluster',
      data,
      getPosition: (c: Cluster) => [c.centerLon, c.centerLat],
      opacity: 1,
      getIcon: (c: Cluster) => ({
        id: this.generateClusterIconId(c),
        url: `data:image/svg+xml;base64,${ btoa(this.generateClusterIconUrl(c, clusterSize)) }`,
        width: clusterSize,
        height: clusterSize
      }),
      sizeScale: .625,
      getSize: clusterSize,
      alphaCutoff: 0,
      pickable: true,
      onClick: ({ object: c }: { object: Cluster }) => {
        this.clusterClicked = c.geohash;
        if (this.getZoom() >= MAX_ZOOM) { // If cluster cannot longer be zoomed in
          this.changeToList.emit();
        } else {
          this.map.fitBounds({
            east: c.maxLon,
            north: c.maxLat,
            south: c.minLat,
            west: c.minLon
          });
        }
      },
    });

The amount of data entries may change depending on the bounds of the map in the screen and the events we receive, so we don't always have the same length of data (pointing this out, just in case it is relevant).

Environment (please complete the following information):

• Framework Version: deck.gl 8.0.6
• Browser Version: could reproduce it in Safari, Chrome and Firefox
• OS: could reproduce it on MacOS and Windows

Logs

No error logs are generated

[Pessimistress]

@xintongxia I think this is related to the y-flipping in image loader. When you copy the old texture to a new one it might not be positioned correctly.

[Pessimistress]

Try 8.0.7

[ruizmarc]

Great! It seems it is working fine now :)

Thanks for your quick solution! I'm closing the issue.