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.
In Chrome on Windows & Mac and MS IE 11, the fill hatch or picture displays as expected.
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
- There are no errors or other indicators for an issue from within the developer tools.
- The network tab shows the fill picture (hatches in simplefillsymbol use a picture just like a picture fill symbol) IS being downloaded successfully.
- Inspecting the canvas svg elements and the sections in the working and non-working browsers show the exact same information so the svg elements appear to be correctly created.
Steps to reproduce
- Add the <base href="..."> tag
- Use one of the polygon tools.
- See the result in Edge/FireFox/Safari
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.