bug: native emojis are sometimes rendered incorrectly

Created by: teidesu

💡 Summary

sharkey native emojis don't include \uFE0F, which leaves it up to the browser whether to render them as emoji or not: https://alanhogan.github.io/system-font-stack-experiments/emoji.html (second column is how sharkey does it currently)

i see 2 possible solutions to this - either forcefully add \uFE0F to the emojis before rendering, or to force an emoji-only font stack (as seen in the last row on the page linked above). the second solution also works around the bug in chrome (due to which chrome tends to ignore \uFE0F), making it imo the preferred one.

additionally, color: #fff is incorrectly applied to the reaction, which makes the incorrectly-rendered thing basically invisible on light background:

🥰 Expected Behavior

\uFE0F is added, and the symbol is rendered with primary text color

🤬 Actual Behavior

\uFE0F is not added, the symbol is rendered with white color making it invisible

📝 Steps to Reproduce

1. post whatever
2. put a ❤️ reaction

💻 Frontend Environment

* Model and OS of the device(s): MBP (16", 2021), macOS Sonoma 14.2.1
* Browser: Edge 120.0.2210.121 (Chromium 120.0.6099.200)
* Server URL: any really
* Sharkey: 2023.12.0

🛰 Backend Environment (for server admin)

n/a

Do you want to address this bug yourself?

• Yes, I will patch the bug myself and send a pull request

Created by: dakkar

The "emoji only font stack" doesn't actually work in general, it looks like this on my machines because none of my machines have any of the fonts in that set.

We could probably add the U+FE0F codepoint after some emojis (although doing that with ZWJ sequences looks non-trivial)

the bit about emoji reactions having color:#fff when overlaid on avatars in notification is a separate problem, and should have been given its own ticket/issue…

Created by: dakkar

ok, I have reproduced the problem with native emojis overlaid on avatars in notifications

Created by: teidesu

none of my machines have any of the fonts

yeah we could have expanded that list a bit (or maybe even make a setting for that). it only covers default macos and windows fonts there

should have been given its own ticket/issue

i thought it would make sense to address them at once, since it might not even be an issue anymore once the first part is fixed

Created by: dakkar

this looks like an improvement

Created by: dakkar

see https://git.joinsharkey.org/Sharkey/Sharkey/pulls/333

Created by: dakkar

probably fixed by upstream, re-open after the next stable release if it's still a problem