Solved 🤔 Spaces after emojis in Google Chrome for Mac not working

[Adam]

I am having a curious issue, both on this site and some others that I can't quite work out.

For me, in Chrome Mac, the space after an emoji is not rendering sufficiently. An example is in post titles on the homepage here and in the style picker in footer. Weirdly, when it's in a title, it does! I have been trying to reliably reproduce this in a CodePen but just can't.

I wonder if any other Chrome Mac users can chime in and let me know what they see? I have just updated to the very latest version.

Space not visible after emoji:

Space works:

🙁Testing with no space
🙁 Testing with space

 

[Adam]

Could anybody screenshot this for me and let me know their Chrome for Mac version number?

🙁Testing with no space
🙁 Testing with space

I see on version 83.0.4103.61:

 

[sfcgeorge]

In Safari it looks perfect:

In Chrome 81.0.4044.138 it looks like hot garbage, too small, too much space:

Then in Chrome 83.0.4103.61 (just updated) they're still on the small side but correct spacing:

Odd that you're seeing practically the opposite. I know Chrome does its own font rendering which is generally worse than macOS's built in font rendering, it's had dodgy moments in the past.

 

[Adam]

Thank you Simon! That's really helpful. I see the same in Safari so safe to say it is something with Chrome's rendering. Does the same in incognito so don't think it's cache/extensions. Will download Canary and have a try.

There's a SO issue here from a few years ago with a similar issue that seemed to effect only non-retina screens. It's followed up to say it's patched now though. Perhaps a regression? Are you on a retina screen?

Emoji rendered in Chrome have different widths than in other browsers

I have a page with an emoji followed by a space and some text. For example, "👥 Friends" (character is "busts in silhouette", U+1F465). In Safari and Firefox on macOS, it renders with a space betwe...

stackoverflow.com

 

[sfcgeorge]

I am on a retina screen, even my external monitor is so I can’t compare. That seems likely

 

[Gummibeer]

macOS Catalina 10.15.3 @ 15,4-Zoll (2880 x 1800)

Chrome Version 81.0.4044.138 (Offizieller Build) (64-Bit)

Chrome Version 83.0.4103.61 (Offizieller Build) (64-Bit)

 

[tom]

macOS: 10.14.6 (18G4032)
Chrome: Version 83.0.4103.61 64-bit
Monitor: LG 4K 27-Zoll (3840 x 2160)

 

[Adam]

Thanks @tom and @Gummibeer! Definitely seems to be a non-retina issue.

There is an open Chromium bug for what I presume is it, but I am surprised it is not getting more attention. I guess non-retina mac users are an insignificant minority.

1083965 - chromium - An open-source project to help move the web forward. - Monorail

bugs.chromium.org

 

[Mike Rees]

Apple's always had that Walder Frey attitude of just upgrading your way out of problems. Are there any modern non-retina devices sold by them?

 

[Adam]

Apple's always had that Walder Frey attitude of just upgrading your way out of problems. Are there any modern non-retina devices sold by them?

The Mac mini and Mac Pro with most 3rd-party displays. I don't think they actually sell a non-retina screen though.

 

[Gummibeer]

The Mac mini and Mac Pro with most 3rd-party displays. I don't think they actually sell a non-retina screen though.

People buying a Mac pro will also buy the 6K retina Display! 😅

 

[avena]

Couldn't help but notice that 3d avatar @Adam , nice! :D

 

[sfcgeorge]

Apple still sells one low end 21.5" iMac without a Retina display. But it's a Chrome issue not an Apple issue. Likely in Skia, Chrome's own rendering engine.

 

[Revod]

Ok this is using Chrome 83.0.4103.61 on macOS Mojave 10.14.6 (18G5033):

And this using Safari: