Red heart emojis show as black heart in firefox and chrome on macos.

[eun-ice]

Describe the bug

The "red heart" emoji ❤️ shows a black heart in firefox and chrome on macos.

In Safari it works correctly. Also other colors like the blue heart do not have that problem.

To Reproduce
Steps to reproduce the behavior:

1. Copy ❤️ into the test at https://rsms.me/inter/ using chrome or firefox.

Expected behavior

A red heart should appear, instead of a black heart.

[rsms]

This is a bug in Chrome and Firefox. Try with Safari, a design tool or a native app and you should see the emoji heart when U+2764 (HEAVY BLACK HEART) U+FE0F (VARIATION SELECTOR-16) is used but a monochrome heart when U+2764 is used (i.e. without a variation selector, which is how an emoji grapheme is composed.)

Chrome bug is tracked here: https://bugs.chromium.org/p/chromium/issues/detail?id=964527

Here’s a test: https://rsms.me/inter/lab/?size=32&sample=U%2B2764%20U%2BFE0F%20%3D%20%E2%9D%A4%EF%B8%8F%0AU%2B2764%20%3D%20%E2%9D%A4

[eun-ice]

Thank you. As other fonts do not have this problem and Firefox and Chrome show the same behavior I thought it might be an issue of this font.
Thank you for checking.

[aarongarciah]

This is still happening, "red heart" (❤️) emoji shows up as a black heart only in Chrome when using Inter. In Firefox (94.0.1) and Safari (15.1) it works just fine. If you use any other font that isn't Inter it will just work in Chrome, too.

Why only happens when using Inter?

Here's a reproduction https://codepen.io/aarongarciah/pen/KKvevjL?editors=1100

[torgeadelin]

@aarongarciah I'm getting the same issue... Only breaks in Chrome with Inter.
@rsms any clues?

[rsms]

As mentioned, this is an issue with chrome. Your best bet is to speak to the chromium team and see if they can fix their weird behavior.