5

I am using macOS 13 (Ventura). Preface to this is I am not a big fan of the use of emojis on SE sites, but this seems like a bug to me.

Please look at this Super User question. Note that in an area where the original poster added more details, such as their two clumsy cats causing a hard drive failure, they use these Emojis: 🐈🐈‍⬛

When I load that page in Firefox (108.0.1 - 64-bit), it looks like this:

enter image description here

But when I load it in Safari (16.2 - 18614.3.7.1.5) it looks like this; note how the second cat is the plain orange/white emoji cat followed by a black box:

enter image description here

I can see the black cat and orange/white cat fine when I visit Emojipedia. Just not on Super User with Safari.

Is this a known issue with combined UTF-8 emojis? Checking these characters out with an online UTF-8 character inspector shows no obvious issues to my eyes; then again I don’t code or manage the way SE sites handle UTF-8 charaters so hey!

Screenshot below of the two cats being rendered properly in Safari (16.2 - 18614.3.7.1.5) with the text area of the UTF-8 character inspector mentioned above.

enter image description here

And here is a screenshot of those two cats if I click on “Disable Styles” from the “Develop” menu in Safari; they render 100% fine!

enter image description here

And here is me hacking the DOM to wrap the cat emoji in this span with inline CSS styles that forces the use of the “Apple Color Emoji” font family:

<span style="font-family: Apple Color Emoji;">🐈🐈‍⬛</span>

And lo and behold, it renders cleanly when I do this! See screenshot below.

But of course this is not a final solution since not everyone is using macOS systems. But it at least proves there might be a typeface issue in play here.

enter image description here

2
  • 6
    Well that looks more like a problem with Safari not handling the way the black cat is represented using 3 unicode code points rather than a Stack Exchange problem. It looks like it hasn't dealt with the U+200d "zero width joiner" properly.
    – greg-449
    Dec 25, 2022 at 9:42
  • 1
    I see the same black rectangle in Chrome latest, PC, Windows 10. So it's not Safari, it's something more basic, maybe some fancy font missing. Dec 26, 2022 at 9:43

0

You must log in to answer this question.

Browse other questions tagged .