Top of Emojis in Safari is slightly cut

[ibrahimk157]

When viewing some emojis in safari, they appear to be cut in the top.

Here’s a screenshot:
https://i.imgur.com/sw8AOf5.jpg

[jordanjay29]

Confirmation in discussion for Mobile Safari.

[garygomes]

Just to note I am getting the very same issue using an iPhone XS Max (iOS 12.1) on Safari.

It seems to be only present on some discussions. One discussion has the top of the emoji cut off, but on another discussion the emoji displays correctly. The only difference being the emoji is on the first line on one discussion as opposed to being on the second line (and more) on the other discussion if that makes sense.

[dsevillamartin]

Seems to be caused by the vertical align being negative.

---

Looks like the problem is solved by making the top margin .1em as well

Same as

margin: .1em;
margin-bottom: 0;

This solution does make a small difference in line height though.

Safari > macOS

Safari > iOS (iPhone Xr)

[luceos]

Needs confirmation on osx/safari, check PR.

[tankerkiller125]

@luceos Checked with OSX/Safari (VM) and confirmed the Emoji are now displayed properly both with and without the PR in OSX 10.15.2, however because it's a VM with limited screen resolution I wonder if this is possibly more of a bug based on resolution?

[luceos]

I had to send in my macbook for repairs, so until we can confirm on a native osx machine, let's keep it open. Thanks for looking at it @tankerkiller125 ;)

[askvortsov1]

@luceos any chance you could check if this is still relevant? As a proud non-mac user I'm kinda useless here :D

[luceos]

Cannot reproduce on desktop safari, it was confirmed on mobile which I cannot reconfirm as I don't have an iPhone.