I've found a really odd issue where "picture fill" portion of the symbol doesn't draw in FireFox, MS Edge and Safari when you're html uses <base> - HTML | MDN . This is quite common in angular apps.
PictureFillSymbols and SimpleFillSymbols with a hatch fill setting (ie STYLE_HORIZONTAL) draw correctly when using the <base> element.
Functioning:
In Chrome on Windows & Mac and MS IE 11, the fill hatch or picture displays as expected.
Non-functioning:
In MS Edge, Safari on Mac and iOS the fill is solid black (no hatch or picture).
In FireFox on Windows & Mac the fill is completely empty (no hatch or picture).
I've stripped most of everything out of the my code in trying to nail down the issue, and it appears to be as simple as adding or removing the <base> element
Steps to reproduce
FireFox result:
FireFox network trace (image is downloaded, other browsers show same download success)
MS Edge and Safari result
Comparing SVG in element inspector Chrome (left) v FireFox (right)
I’ve tried both relative and absolute paths for both the <base> and the Symbol.Url property, neither seems to make a difference.
This is causing a pretty big issue in our web apps. We need to use the <base> tag for angular functionality and we have some fairly complicated cartography so being able to use simple hatches and picture fills is imperative.
NOTE: this issue is not related to angular itself. I can reproduce with just the stock JSAPI.
Thanks
Fred
Quick update:
I tried a data uri for the image url, works fine in Chrome, still fails in FireFox: