Select to view content in your preferred language

Firefox Issues

699
3
Jump to solution
07-26-2023 09:33 AM
Thomas_Z2
New Contributor III

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:

thozub_dal_0-1690389130133.png

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.

0 Kudos
1 Solution

Accepted Solutions
Thomas_Z2
New Contributor III

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.

View solution in original post

0 Kudos
3 Replies
Thomas_Z2
New Contributor III

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

0 Kudos
AndyGup
Esri Regular Contributor

@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.

0 Kudos
Thomas_Z2
New Contributor III

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.

0 Kudos