Chrome visual bug: Emoji next to text (no space displayed)

Sometimes I use emoji in my table cells to make them more visual.

In Chrome on Mac emoji + space + text (for example: “:green_heart: Be more eco friendly”) is displayed without a space between emoji and text. Both when emoji is the first character in the cell or when emoji is in the middle of the text. Space is preserved and displayed when emoji is located after the text.

In Safari on Mac everything is OK.

Safari:

Screen Shot 2020-10-28 at 4.40.50 PM

Chrome:

Screen Shot 2020-10-28 at 4.40.10 PM

2 Likes

I have noticed this as well and will check in again with the team, but IIRC, this is a weird issue that might not be easily solved because it has to do with how Chrome renders the emoji and it’s different from first display to rendering from cache. I think it’s when the emoji is cached that we lose the space. And it’s not as much losing the space, but Chrome not reserving enough space for the emoji, so your cursor will show overlapping the right side of it.

We’ll take another look and see if there is something we can do. I’ve found myself adding two spaces after which then looks wrong on other browsers.

Thanks, @BenLee! I don’t usually use Chrome, but thought Coda team would like to know about this as Chrome is probably more popular among your users than Safari

1 Like