SimpleFillSymbols with "pattern" and PictureFillSymbols fail to draw fill with using <base> tag

fspataro-zz commented 7 years ago

Expected behavior

PictureFillSymbols and SimpleFillSymbols with a hatch fill setting (ie STYLE_HORIZONTAL) draw correctly when using the tag for RouteProvider and/or LocationProvider

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

Functioning: In Chrome on Windows & Mac and MS IE 11, the fill hatch or picture displays as expected.

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 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 the behavior

This is hard to setup in Plunker b/c the tag needs to know the actual root directory of the website/app. I was able to reproduce it using the graphic example in V1 but Plunker appear to create a new virtual directory each time it's accessed so it's not a stable example. I setup the example on my dev server here:

http://carto.yourdatasmarter.com/issues/pfsa/index.html

This is the faulty version. The only difference between this and working version on the examples site is the tag on line #5 in index.html. Removing this line, fill pictures draw correctly.

Load URL in various browsers
Select the "Polygon" or "Freehand Polygon"
Draw on screen.

FireFox:

MS Edge (Safari produces same result)

Comparing FireFox SVG with Chrome SVG

jwasilgeo commented 7 years ago

@fspataro this is an interesting catch!

I was able to isolate it to JSAPI 3.x and your use of a <base href="..."> tag, so I think we can rule out angular-esri-map as doing something odd here.

I recommend:

Copy this sample locally: https://developers.arcgis.com/javascript/3/jssamples/graphics_add.html
Add your <base href="..."> tag as normal
See that it has the same behaviour (it did for me in Edge)
Submit this info to the JSAPI team by using the "Report and error on this page" email link at the bottom of the JSAPI sample page.

fspataro-zz commented 7 years ago

Thanks for the quick response @jwasilgeo !!!

Yes I'm seeing the issue in the stock JSAPI sample as well by just adding the tag. Sorry I should have checked that once I isolated it but I've only ever used that tag for angular apps so I just assumed it was an angular issue. I'll add any notes I get from the JSAPI team here, in case anyone else runs across the issue.

Esri / angular-esri-map