Firefox Issues

[Thomas_Z2]

I have a simple web map with 3 layers. Two of them use feature reduction. I am using ArcGIS Map SDK for JavaScript 4.27, TypeScript and Angular 16.

Web map works well with Edge and Chrome but hangs in Firefox. Firefox gets unresponsive and two of the layers are not shown (those with feature reduction).

I'll get an error in the Web Developer Console:

The JavaScript file is located here:
https://js.arcgis.com/4.27/@arcgis/core/assets/esri/core/workers/chunks/3ad56b5f273e2d911dbd.js

This error does not occur when using Edge and Chrome.

[Thomas_Z2]

I am also using a custom base map (a Vector Tile Layer) stored on ArcGIS Online. 

[AndyGup]

@Thomas_Z2please provide a simple, focused sample application that reproduces the error. We recommend using vanilla JS (e.g. codepen demoing the webmap), stackblitz or github repo.

For example, here is an Angular example that provides a good starting point: https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-angular-cli.

[Thomas_Z2 · Accepted solution]

Unfortunately providing a MWE was not possible this time. 

However, I found the culprits...

• Performance issue did only occur when the Web Developer Console was open.
• Symbols are not shown (and the occurrence of the JS error posted in the question) does only happen if I use a PictureMarkerSymbol with a SVG file. This must be a bug as the SVG file works well in Edge and Chrome as we well as in Firefox (when displayed in a feature popup using an img tag).

const RENDERER = new SimpleRenderer({
  symbol: new PictureMarkerSymbol({

    // url: 'assets/map-symbols/gender-neutral.svg',  // not working
    url: 'assets/map-symbols/gender-neutral.png',     // working 

    width: '34px',
    height: '34px',
    xoffset: '-18px',
    yoffset: '-3px',
  })
});

After changing the URL to point to a PNG file instead of a SVG file, I do not have any issues anymore, and neither do I get the JS error.