Can't render common unicode arrows as text in iOS

[Kirkman]

I'm trying to use Unicode arrows in TextLayers on a map, but it's not working in iOS.

First, I tried using two "equilateral triangle arrowhead" arrows -- U+1F81D and U+1F818. These worked great in the Windows and non-Safari browsers I tried, but not at all in Mac or iOS Safari.

So I tried switchingt to two "black arrow" characters which seem to have broader support across OSes -- U+2B06 and U+2B05. These worked as expected in Windows and Mac browsers, including Mac Safari v16.5.2 ...

... but they show up as rounded-corner squares in iOS 17.4.1. I believe this is because iOS is trying to render them as Emoji style rather than text.

I tried appending the "variation selector" U+FE0E after the character code for the arrows. This should force them to be rendered as text. My change did no harm on the other platforms, but it also has not changed the behavior in iOS like it should have. Here's how the code looks for the northward-pointing arrow on my example map:

const compassLayer1 = new TextLayer({
	id: 'compass-layer-1',
	data: [{text: '\u2b06\ufe0e', lat: 26.5, lng: -89.12274319058493}],
	pickable: false,
	getPosition: d => [Number(d.lng), Number(d.lat)],
	getText: d => d.text,
	getColor: [120,120,120,255],
	getSize: 36,
	sizeUnits: 'pixels',
	getAngle: 0,
	fontFamily: "'Libre Franklin', sans-serif",
	fontWeight: 900,
	characterSet: 'auto',
	getAlignmentBaseline: 'bottom',
	billboard: false
});

At this point I'm mystified. Anyone have any suggestions?

[Pessimistress]

The TextLayer uses Array.from(string) to render characters one-by-one, which means the empty control character is drawn separate from its preceding character.
@ibgreen This seems like a case where #7840 can become really useful.