Incorrect rendering in native mode depending on browser

I am looking into using native emoji to avoid having to download megabytes of spritesheets (and nudge users into upgrading their OSes 😉); but I’m getting some really weird cases of inconsistent rendering on the widget and I have no idea on what is the cause or the solution.

For example, here are captures from the demo page at https://missive.github.io/emoji-mart/:

Firefox	Safari (the only working example)

The situation gets even more confusing and chaotic when I actually try embedding it in my webpage:

Firefox (same issue)	Safari (wtf)

At first I thought this could be a problem related to my global styles, or even the font being used, but no matter how many styles I toggled off I still got the crazy results in Safari. Not sure where to go from here, other than giving up on native.

[Jessidhia]

A friend helped me debug this, and these are some things I’ve learned. They each depend on the browser being used.

Chrome: our html :root has a lang attribute that is set to "ja" for most users. Setting the lang to any value that is not recognized as a valid lang (say, lang="jp", lang="zzzzz" or lang=""), or set it to en, actually makes it render correctly. The lang tag can be set locally, so it might be worked around by emoji-mart through setting lang="" on the spans that render emoji. This is likely a Blink bug.

document.documentElement.lang = 'ja' reproduces it in the demo page.

Safari: We, for some reason, have a global div { word-wrap: break-word; } reset. Disabling it, or setting it to normal in .emoji-mart-category, .emoji-mart-preview-emoji made the emoji combine correctly in it, regardless of the lang settings. It did nothing on Chrome, though; only lang worked there.

document.body.style.wordBreak = 'break-word' (or break-all) reproduces it in the demo page.

I could not find anything that would work on Firefox; but it’s also broken in the demo page, so it’s not something caused by our page’s environment.

[EtienneLem]

There’s nothing much we can do about browsers not supporting some native emojis, especially when it’s the result of the addition of 2 supported emojis that isn’t. For example: ✌️ + 🏻 = ✌🏻. Some browsers (on outdated OS) will render it like so:

I would suggest not using the native set when you don’t control in which environment it is displayed.