my symbol becomes invisible after a time

[davesargrad]

i am new to the use of this library. i am displaying a symbol as follows:

  const milSymbol = new CesiumMilsymbol(
    "SUP*S-----*****", // must be a valid SIDC string
    track_event.data.lla_center.lat,
    track_event.data.lla_center.lon,
    world_view_cfg.surface_trace_height,
    {
      size: world_view_cfg.track_symbol_size,
      sizeInMeters: true,
      fillColor: "#00ff00", // color.toCssColorString(),
      strokeColor: "#0000ff", //track_theme.outline.toCssColorString(),
      clampToGround: false,
      realWorldSize: { height: 50, width: 50 }, // meters
      outline: true,
      transparent: true,
    }
  );

The class I use caches the created symbol as follows:

const symbolCache = {};
function getCachedSymbolUrl(sidc, fillColor, strokeColor, size = 64) {
  const cacheKey = `${sidc}_${fillColor}_${strokeColor}_${size}`;

  if (symbolCache[cacheKey]) {
    // Return cached URL if available
    return symbolCache[cacheKey];
  }

  // Otherwise, generate new SVG
  const msSymbol = new MilSymbolModule.Symbol(sidc, {
    size,
    fill: fillColor,
    stroke: strokeColor,
  });
  const svgString = msSymbol.asSVG();
  const base64 = btoa(unescape(encodeURIComponent(svgString)));
  const url = `data:image/svg+xml;base64,${base64}`;

  // Store in cache
  symbolCache[cacheKey] = url;

  return url;
}

the class constructor performs the following function:

    this.url = getCachedSymbolUrl(
      this.sidc,
      this.fillColor,
      this.strokeColor,
      this.size
    );
    this.lla = { lat: lat, lon: lon, alt: alt };
    this.entityDescriptor = this._createEntityDescriptor(this.position);

in order to overlay the symbol on a cesium rectangle or a cesium billboard

_createEntityDescriptor(position) {
    console.log("MY POSITION: ", position);
    if (this.realWorldSize) {
      const rect = {
        coordinates: this._computeRectangleFromPosition(
          position,
          this.realWorldSize
        ),
        material: new Cesium.ImageMaterialProperty({
          image: this.url,
          transparent: this.transparent,
        }),
        outline: this.outline,
        outlineColor: Cesium.Color.fromCssColorString(this.strokeColor),
      };

      if (this.clampToGround) {
        rect.height = 0;
        rect.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
      } else {
        rect.height = this.lla.alt;
        rect.heightReference = Cesium.HeightReference.NONE;
      }

      return {
        position: position,
        rectangle: rect,
      };
    }

    // Billboard mode
    return {
      position: position,
      billboard: {
        image: this.url,
        width: this.size,
        height: this.size,
        sizeInMeters: this.sizeInMeters,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        heightReference: this.clampToGround
          ? Cesium.HeightReference.CLAMP_TO_GROUND
          : Cesium.HeightReference.NONE,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
      },
    };
  }

all this works properly. except over time the symbol, overlaid on a rectangle, will begin to fade, and get to the point where its invisible (though it is still being outlined). As an aside, the symbol does not become invisible when displayed on a billboard.

I understand that this might be a cesium thing, and not a milsymbol thing. however I am hoping that this issue will trigger an expert to suggest something for me to look at.