Feature Layer incorrect rendering with webgl rendering and picture marker symbols

[ToddAtkins]

I've got a feature layer on AGOL that users picture marker symbols for its symbology. If I enable webgl feature layer using 

"esri-featurelayer-webgl": 1‍

then the symbols do not all render correctly though they are correct in the legend:

Disabling esri-featurelayer-webgl solves the issue but then breaks the labeling and feature highlights for popups which are required for the app I'm building here. The incorrect symbols appear as a mishmash of other symbols squished together. This is observed in both Chrome and Firefox on OS X.

Using JS API 4.8.

Any ideas here? Is this a bug in the API or something I'm doing wrong on the coding side?

[ReneRubalcava]

I was thinking it might be a CORS issue, but I don't think any symbol would show up in that case. If it were a CORS issue, you could try adding the domain to the esriConfig.request.corsEnabledServices array or use a Proxy to proxy the image request. WebGL is more particular about this than simple image source tags or SVG.

Can you check if you have any warnings related to CORS in the Chrome Dev console? Do you have a public layer item or webmap with this symbol? Maybe the URL to the picture to see if we can replicate?

Thanks

[ToddAtkins]

Rene, there's no cors warnings in the dev console and I wouldn't expect that since the feature layer is coming directly from AGOL.

Here's a link to a couple images that exhibit the issue:

Image the First

Image the Second

All we're doing is setting the symbology for the layer in AGOL and saving the layer there. The images are all originally from our dropbox folder.

The layer isn't public but let me see if I can setup a test case with a public layer.

[ToddAtkins]

And here's a public layer that demonstrates the issue. There's a single point east of I-35 near the OK/KS line.

const lyr = new FeatureLayer({
    url: 'https://services1.arcgis.com/aUqH6d4IMis39TBB/arcgis/rest/services/test_webgl_issues/FeatureServer/0',
    outFields: ['*'],
    opacity: 1.0,
    visible: true
}‍‍‍‍‍‍‍);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The image file I used is this one: Logo

Thanks for having a look at this. I'm also using the js cli if that matters at all.

[ReneRubalcava]

Awesome thanks! I see it in that layer now. Passed it along to the right people and currently investigating, thanks!

[ToddAtkins]

For anybody following this, Esri has filed two bugs related to this:

#BUG-000115988 Picture Marker Symbols in Feature Layer are unable to display with WebGL enabled when imageData of the symbol stored at REST Endpoint is lengthy.

#BUG-000115991 Picture marker symbols in FeatureLayer with WebGL enabled display as jumbled when using more than 10 unique value categories to symbolize points.

[ToddAtkins]

Looks like 4.9 has solved the issues I was having with this.