Version

3.2.33

Reproduction link

sfc.vuejs.org/

Steps to reproduce

1. Try to render colored emoji converted from Unicode such as ['"263a", "fe0f"]
2. To convert Unicode to emoji you can use String.fromCodePoint example: String.fromCodePoint(parseInt('263a', 16))

What is expected?

It should render emojis as with their color.

What is actually happening?

It doesn't render emoji color.

Expected sandbox: VanillaJS
Actual (SFC): VUE3

work as expected.🤔

@edison1105 Looks like it happens only in chromium browsers on Mac, Chrome (version: 100.0.4896.127), Brave & Edge has this issue; It works fine in Safari & Firefox.

@edison1105 Looks like it happens only in chromium browsers on Mac, Chrome (version: 100.0.4896.127), Brave & Edge has this issue; It works fine in Safari & Firefox.

oh~ I tested in chrome on Windows.

This is unrelated to Vue.js: you can try replacing any p tag directly with the console in this very page and you will see the same result:

emojis = ["1f976", "1f97a", "263a-fe0e", "2639-fe0f"]
unicodeToEmoji = (unicode) => {
  return unicode
    .split('-')
    .map((hex) => String.fromCodePoint(parseInt(hex, 16)))
    .join('')
}
// select one p in the devtools then
$0.innerHTML = unicodeToEmoji(emojis[3])

You can set the font-family as "Apple Color Emoji" for macOS.