The issue of certain emojis displaying additional rectangles on iOS devices is discussed. nibl initially reports the problem and shares screenshots. Mittineague suggests it’s due to differences in iOS emoji, recommending the use of Discourse emojis instead.
nibl confirms the Discourse emojis work without issues, and speculates it might be a Unicode problem. Mittineague agrees, referencing a previous topic on the issue.
sam reports similar issues on Mac, not just iOS, and tags pmusaraj for assistance. pmusaraj identifies two separate issues: emoji conversion and extra squares after some emojis. They later discover that the issues are related and caused by the Unicode U+FE0F character, which confuses Safari and results in the rectangle display.
A pull request (#6456) aims to resolve the issue by trimming the U+FE0F character when replacing Unicode emojis. However, pmusaraj notes that this might break emojis when converted back to Unicode in certain situations.
Certain emojis display a rectangle after the image. Does anyone know the cause for this?
I’ve attached two screenshots below. One shows the emojis when writing a new post, the second what happens after posting.
I’m running version 2.0.0 beta 6 of Discourse. The emoji set is Apple/International.
Test: happy little 
and happy little 
.
Hmm, it’s happening on here too. At least for me viewing on an iOS device.
AFAIK it is a difference with the iOS emoji. I have noticed the same “squares” effect with other applications as well.
For example, these are from the Discourse emoji picker:
While these are from the iPad keyboard selector:
Easy solution, use the Discourse emojis.
Thanks, just tested. Indeed, the Discourse emoji work as expected, without any additional rectangles.
Out of curiosity, is this some kind of Unicode issue where the two systems don’t know how to interpret the codes?
I’m fairly certain it is, yes. And I’m thinking that Discourse vs. iOS emojis was a missing bit of information in this earlier topic
I just came across this today when posting 
(this is actually from a Mac now, this is not iOS specific, it is Emoji code → Emoji conversion)
@pmusaraj can you have a look at this?
Also see: What is the problem with PrettyText.markdown call?
I think there are two separate issues here.
The first one is that sometimes when using multiple emojis without spaces, some of them won’t convert correctly. Could this be due to:
(no spaces between)
(spaces between)
The second issue is that extra square after some emojis. Not sure yet what this might be.
Update: those extra squares only show on Safari, screenshot below has the same post in Safari, Chrome, Firefox (left to right):
It turns out the two issues are related. Some emojis include the Unicode U+FE0F character, which is the VARIATION SELECTOR-16 selector, an “invisible codepoint which specifies that the preceding character should be displayed with emoji presentation”. Since the preceding code point is turned into an image, Safari gets confused, and it displays this rectangle instead.
https://github.com/discourse/discourse/pull/6456
Note that the PR trims U+FE0F when replacing unicode emojis but I wonder whether it breaks emojis when they get converted back to Unicode in push notifications and the like.
