Edge Browser Making Extra Boxes around some template strings

[johngruen]

Just noticed this while debugging edge's SVG behavior.

[ghost]

This is suspiciously similar to #875 but I can still reproduce that one (on Firefox) and I can't see this one (on Firefox)

[johngruen]

Don't think this is CSS related. Probably l20n placeholders getting rendered

[meandavejustice]

Still seeing a little weirdness on edge as of today.

(edge is on the right)

Here is some discussion on the issue, l20n/l20n.js#116

We can maybe close this as it is an upstream bug, thoughts?

[johngruen]

@SoftVision-PaulOiegas can you confirm this on latest edge?

[SoftVision-PaulOiegas]

@johngruen The original boxes were replaced now by some other weirdness as mentioned in Dave's screenshots. These are displayed on every experiment details page after launch date and experiment name.

[johngruen]

@dannycoates has a fix for this on Send, we should consider implementing the same:

mozilla/send#476

[fzzzy]

@johngruen Thank you very much for the link to danny's fix. It looks pretty simple:

var ctx = new fluent.MessageContext('${locale}', {useIsolating: false});

See this page for details on these characters: https://en.wikipedia.org/wiki/Bi-directional_text#Unicode_support

FSI is the 'First Strong Isolate' character. PDI is the 'Pop Directional Isolate' character. Presumably, useIsolating: false prevents Fluent from emitting these characters. I assume there is some reason to emit these characters -- leaving them out might cause issues with right-to-left languages? But I guess we can cross that bug when we get to it.

[fzzzy]

I submitted an untested pr which might fix it -- can someone with easy access to Edge test it?

[SoftVision-PaulOiegas]

The fix on your branch seems to be working. 👍 Verified with Microsoft Edge 40.15063.674.0 on Windows 10 v1703 (OS Build 15063.850).