# Emojis selected on iOS displaying additional rectangles
**URL:** https://meta.discourse.org/t/emojis-selected-on-ios-displaying-additional-rectangles/86132
**Category:** Support
**Created:** [April 25, 2018, 9:26am UTC](https://meta.discourse.org/t/emojis-selected-on-ios-displaying-additional-rectangles/86132 "2018-04-25T09:26:40Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@nibl](https://meta.discourse.org/u/nibl)
#### Post date: [April 25, 2018, 9:26am UTC](https://meta.discourse.org/t/emojis-selected-on-ios-displaying-additional-rectangles/86132/1 "2018-04-25T09:26:40Z")
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.
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [April 25, 2018, 10:04am UTC](https://meta.discourse.org/t/emojis-selected-on-ios-displaying-additional-rectangles/86132/2 "2018-04-25T10:04:07Z")
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.
---
### Author:  [@nibl](https://meta.discourse.org/u/nibl)
#### Post date: [April 25, 2018, 10:58am UTC](https://meta.discourse.org/t/emojis-selected-on-ios-displaying-additional-rectangles/86132/3 "2018-04-25T10:58:02Z")
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?
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [April 25, 2018, 7:15pm UTC](https://meta.discourse.org/t/emojis-selected-on-ios-displaying-additional-rectangles/86132/4 "2018-04-25T19:15:45Z")
> [@nibl](#):
>
> is this some kind of Unicode issue
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
> [@What is the problem with PrettyText.markdown call?](https://meta.discourse.org/t/what-is-the-problem-with-prettytext-markdown-call/84674):
>
> PrettyText.markdown("heartheartheart", {}) Will not generate the same code as: PrettyText.markdown("heart:heart::heart:", {}) It generates: =\> "\\![\"heart\"\](\"/images/emoji/apple/heart.png?v=5\" "\\"heart\\"")
️heart️heart️\" ( there are ':️' & ':', copy paste to https://www.soscisurvey.de/tools/view-chars.php to see it) I think it has something to do with replacement = "\u200b" + replacement; In lib/pretty\_text/shims.js ( on 1.9.4 )
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [October 4, 2018, 11:34pm UTC](https://meta.discourse.org/t/emojis-selected-on-ios-displaying-additional-rectangles/86132/6 "2018-10-04T23:34:59Z")
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?](https://meta.discourse.org/t/what-is-the-problem-with-prettytext-markdown-call/84674)
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [October 5, 2018, 2:23pm UTC](https://meta.discourse.org/t/emojis-selected-on-ios-displaying-additional-rectangles/86132/7 "2018-10-05T14:23:25Z")
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:
> [@What is the problem with PrettyText.markdown call?](https://meta.discourse.org/t/what-is-the-problem-with-prettytext-markdown-call/84674/23):
>
> We only allow emoji expansion after a punctuation or space.
🧡💚💛💙💜❤❤❤ (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):
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [October 5, 2018, 5:00pm UTC](https://meta.discourse.org/t/emojis-selected-on-ios-displaying-additional-rectangles/86132/8 "2018-10-05T17:00:40Z")
It turns out the two issues are related. Some emojis include the Unicode `U+FE0F` character, which is the [VARIATION SELECTOR-16 selector](https://emojipedia.org/variation-selector-16/), 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](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.
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [December 20, 2018, 2:22pm UTC](https://meta.discourse.org/t/emojis-selected-on-ios-displaying-additional-rectangles/86132/9 "2018-12-20T14:22:23Z")