Emoji rendered in Chrome have different widths than in other browsers

by

I had the same issue, and found out that it happened on non-retina screens only.

To fix it, we applied a margin through a media-query like this:

<span class="friends"><span class="emoji">👥</span> Friends</span>

<style>
  @media
  not screen and (min-device-pixel-ratio: 2),
  not screen and (min-resolution: 192dpi) {
    span.emoji {
      margin-right: 5px;
    }
  }
</style>

This is a pretty minimal media-query. You should probably use a more complete one like https://stackoverflow.com/a/31578187/1907212.

Leave a Comment