Misaligned Emoji in macOS (non-retina / no-hidpi)

Steps to reproduce

Type in 111👨abc🐭国 in the editor

Expected result & Actual result

With default font (Apple Color Emoji), the emoji in both preview and editor are misaligned and overlapping with the following text. The emoji behave normally when Apple Color Emoji in the variable --default-font is replaced with Segoe UI Emoji in custom css.

image

Environment

  • Operating system: macOS 11.1 (20C69)
  • Obsidian version: v0.10.2

Does this happen with the default css?

This is likely an upstream electron problem or something that apple changed recently.
If you have an old installer version you can try to download and install a fresh copy of obsidian from the website. Maybe it will help.

I’ve tested old versions of obsidian with fresh copies, and here are the results:

Emoji looks normal before v8.0.12…




And misaligned since then:


i confirm that is a very weird bug/ regression that happened in electron(chrome) going from version 10 to 11

Fixed in v0.10.3 :laughing:

I don’t know. we didn’t fix this.

Does this not happen because you are using a custom theme?

Wired, the same bug appears again…
image
I’m using the same custom theme as the previous post. Don’t know what is causing this…

Same thing happened again when I updated to v0.10.4. The bug seems to be temporarily fixed when obsidian is updated to a newer versionimage

Confirmed that the bug is caused by the display resolution, this topic may be relevant (Emoji rendered in Chrome have different widths than in other browsers)

2560x1440 without HiDPI (native non-retina display)


image

2560x1440 with HiDPI enabled (the same display faked as retina display)


image