When using tag, SimpleFillSymbols with "hatches" and PictureFillSymbols fail to draw fill

FredSpataro — Fri, 03 Feb 2017 17:24:11 GMT

Hi All,

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.

Expected behavior

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.

Actual behavior

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

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

Copy this sample locally: https://developers.arcgis.com/javascript/3/jssamples/graphics_add.html
Add the <base href="..."> tag
Use one of the polygon tools.
See the result in Edge/FireFox/Safari

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

Re: When using tag, SimpleFillSymbols with "hatches" and PictureFillSymbols fail to draw fill

FredSpataro — Fri, 03 Feb 2017 17:47:24 GMT

Quick update:

I tried a data uri for the image url, works fine in Chrome, still fails in FireFox:

topic Re: When using <base> tag, SimpleFillSymbols with "hatches" and PictureFillSymbols fail to draw fill in ArcGIS JavaScript Maps SDK Questions

When using tag, SimpleFillSymbols with "hatches" and PictureFillSymbols fail to draw fill

Hi All,

Expected behavior

Actual behavior

Re: When using tag, SimpleFillSymbols with "hatches" and PictureFillSymbols fail to draw fill