Issue with TextSymbol HaloSize in Chrome

2540
9
01-12-2017 10:53 AM
YohanBienvenue
Occasional Contributor II

I'm having an issue with the Halo size of TextSymbols in Chrome. I haven't been able to see a pattern yet, but it happens frequently. Often the HaloSize seems to be 1 less then asked. For instance if I ask for a HaloSize of 1, some will be at 0. If I ask for a HaloSize of 2, some will be at 1. If I load the exact same graphics in Firefox, the Halos are fine.

Here's screenshots from our application. In this specific case we add TextSymbols to measure polygon segments. All properties are the same for each TextSymbol, except for the angle and actual text used. Note that the surface labels in the middle of each polygons never have this issue, only the ones along each polygon segments. In this shot there 3 symbols that lost their halo in Chrome.

(Although this might be a bug specific to Chrome, I still thought I'd ask here and see if others got the same issue.)

We're using the API 3.19

Chrome

Chrome

Firefox

Firefox

Thanks,

Yohan

UPDATE 2017-08-13

So I finally got some time to look at this issue again, at least to find a workaround. I ended just doing a lot of tests and compiling a list of the problem angles, then just increasing the halo size by 1 for those angles. Seems to work fine.

if (has("chrome")){
var problemAngles = [8, 11, 27, 28, 34, 37, 40, 43, 44, 46, 47, 50, 53, 56, 62, 63, 79, 82, 98, 101, 117, 118, 124, 127, 130, 133, 134, 136, 137, 140, 143, 146, 152, 153, 169, 172, 180, 188, 191, 207, 208, 214, 217, 220, 223, 224, 226, 227, 230, 233, 236, 242, 243, 259, 262, 278, 281, 297, 298, 304, 307, 310, 313, 314, 316, 317, 320, 323, 326, 332, 333, 349, 352];
var haloSize = problemAngles.indexOf(angle) > -1 ? 2 : 1;
}

Not that this list does not handle negative angles, but you can just add 180 when this is the case.

Hope this helps someone.

Tags (3)
0 Kudos
9 Replies
TomSellsted
MVP Regular Contributor

Yohan,

Do you have an app that can be used to test?  It would be helpful for diagnosing/replicating the problem.  Is the text added as a label layer or just as graphics?

Regards,

Tom

0 Kudos
YohanBienvenue
Occasional Contributor II

Tom,

No it's proprietary code and these labels are not available without an account to log in the application.

They are just Graphic objects. Here's the snippet of code that actually adds them to a GraphicsLayer:

var font = new Font("12pt");
font.setFamily("Arial");
font.setWeight(Font.WEIGHT_BOLD);
font.setDecoration("none");
font.setStyle(Font.STYLE_NORMAL);

var symbol = new TextSymbol(this.textInput.value);
symbol.setAlign(TextSymbol.ALIGN_MIDDLE);
symbol.setColor(new Color("#2A506F"));
symbol.setFont(font);
symbol.setText(distance.toFixed(2).replace('.', ',') + " " + aziUnits.codeToShortText(unitCode));
symbol.setHaloColor(new Color([255, 255, 255, 1]));
symbol.setHaloSize(1);
symbol.setAngle(angle);

// Add the measure label to the graphics layer
var textGraphic = new Graphic(m4, symbol);
textGraphic.tool = this.toolName;
textGraphic.m1 = m1; // We save m1 and m2 for distance recalculation when the unit is changed (See unit-change)
textGraphic.m2 = m2;
textGraphic.initial = {
mapScale: this.map.getScale(),
fontSize: font.size
};
//this.map.graphics.add(textGraphic);
this.drawGraphicsLayer.add(textGraphic);

Thanks again

0 Kudos
TomSellsted
MVP Regular Contributor

Yohan,

I was able to modify my measure widget Measure Widget 2.1 for Web App Builder to have a halo.  It is pretty subtle but it appears to me, at certain angles the text halo disappears.  You can experiment yourself with my widget at:

ArcGIS Web Application 

I tried it in other browsers and the halo does appear to work properly.

Regards,

Tom

YohanBienvenue
Occasional Contributor II

Neat widget.

I really appreciate you testing this on your side and confirming this.

It's harder to see on your pale basemap, but yeah if I test it on a darker patch (for better contrast) I could clearly see you have the same issue at steeper angles. So at least now I know it's not something related to my code and there's probably not much I can do. I did notice it seems to happen more frequently at steep angles, but not all the time, and I can't see a specific pattern.

I think that In the end if it's really a Chrome bug and there's nothing I can do I'll probably just increase the halo size by 1. I'll still have some thinner halos when the bug happens, but at least I won't have text with no halos at all.

But if I do find some fix or workaround I'll let you know.

Thanks

0 Kudos
TomSellsted
MVP Regular Contributor

Yohan,

I also inspected the code for each of the text items and it all looks identical.

<text fill="rgb(0, 0, 0)" fill-opacity="1" stroke="none" stroke-opacity="0" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="690" y="295" text-anchor="middle" text-decoration="undefined" rotate="0" kerning="auto" text-rendering="auto" font-style="italic" font-variant="normal" font-weight="bold" font-size="20" font-family="Courier" dominant-baseline="alphabetic" filter="url(#halo_map_graphicsLayer3_255_255_255_1_2)" transform="matrix(0.62124526,-0.78361618,0.78361618,0.62124526,20.17399446,647.42781427)" fill-rule="evenodd">190.6'</text>

You are probably right.  It is most likely a Chrome bug.

Regards,

Tom

KristianEkenes
Esri Regular Contributor

We've seen problems with the textHalo in Chrome in certain scenarios and have a couple of open issues for it. This one looks slightly different though. Can you send a live test case so we can check it out further? 

Thanks.

TomSellsted
MVP Regular Contributor

Kristian,

I had posted a live example previously in this thread at:

ArcGIS Web Application 

It is an example using my measure widget in WAB.  Zoom in to a darker area of the basemap for better contrast.  Select the line or polyline tool and start drawing.  As you rotate the line you are drawing, you will see the text measurement with a halo.  As you rotate you will see some angles have a smaller halo than others.

I hope this helps.

Regards,

Tom

KristianEkenes
Esri Regular Contributor

Perfect. Thanks.

0 Kudos
TomSellsted
MVP Regular Contributor

You are welcome!

0 Kudos