Repository navigation
Emojis render no color on macOS Desktop #100964
Description
On desktop, sometimes emojis render no color. I can check it, with macOS or windows. On windows, the problem is more serious
Screen.Recording.2022-03-29.at.18.08.38.mov
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 2.12.0-4.1.pre, on macOS 12.3 21E230 darwin-x64, locale en-VN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] VS Code (version 1.65.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
• No issues found!
Activity
[-]Emoji render no color[/-][+]Emojis render no color[/+]daadu commentedon Mar 29, 2022
I guess, these are rendered based on Font.
letungcntt commentedon Mar 29, 2022
I hope it's the answer. but sometimes emojis render right, sometimes render wrong.
Untitled.mov
letungcntt commentedon Mar 29, 2022
On Windows, emojis can't render flags color:
daadu commentedon Mar 29, 2022
Try using https://github.com/googlefonts/noto-emoji/tree/main/fonts -as font for colored emoji.
letungcntt commentedon Mar 30, 2022
@daadu Thanks for the answer, I have pulled and added this font https://github.com/googlefonts/noto-emoji/tree/main/fonts.
By macOS, the problem doesn't fix. By Windows, most emojis had rendered color. However, emojis in Flags, can't render color.
Windows:
Screen.Recording.2022-03-30.at.09.30.00.mov
MacOS:
Screen.Recording.2022-03-30.at.09.31.54.mov
daadu commentedon Mar 30, 2022
Did you tired windows compatible version?
letungcntt commentedon Mar 30, 2022
yeah. I had used
NotoColorEmoji_WindowsCompatible.ttfon windows. Normally, emojis cant render color but after I addedNotoColorEmoji_WindowsCompatible.ttfmost of the emojis rendered color, except emojis in tag flagsmaheshj01 commentedon Mar 30, 2022
Hi @letungcntt, Thanks for filing the issue. I verified on mac on the latest stable channel and I am unable to reproduce the issue. But on the latest beta and the master channel the issue is reproduced ❤ emoji is rendered black on macos Desktop and renders fine on the web.
Stable
Screen.Recording.2022-03-30.at.12.39.03.PM_Trim.mp4
beta / master
Screen.Recording.2022-03-30.at.12.51.22.PM_Trim.mp4
Labeling this issue as a regression.
flutter doctor -v (mac)
21 remaining items
knopp commentedon Mar 6, 2023
This is not quite my experience. For example for the "stop" the emoji picker can provide both ⏹️ (which as the FE0F selector) and ⏹ which doesn't. But for fast forward (⏩) it does omit the selector.
EddieMataEwy commentedon Aug 6, 2023
For people on Windows, setting familyFontFallback didn't work for me.
What worked was setting app theme familyfont (you can also only set it for specific elements) to "Segoe UI Emoji". Normal text will still be rendered natively but emojis will now be rendered correctly.
Flutter falls back to "Segoe UI Variant" for anything that is not an emoji I believe.
gnprice commentedon Jan 9, 2024
A previous thread on the same issue is #49627. A comment there (#49627 (comment)) by @JoshJuncker has a nice demonstration of how the order of emoji in a paragraph affects the issue:
(I think #100964 (comment) above explains why the order makes a difference.)
That comment also reports that the issue is found on Android, in addition to the other platforms already mentioned in this thread.
MichalNemec commentedon Dec 10, 2024
macOS 14.6.1 (23G93)
flutter
by using
in TextFormField i see black "red" heart.
in Text i see black "red" heart.
codeUnits are [9829, 65039]
If i use fontFamily: 'Apple Color Emoji' then it works, but everything has super word spacing.
It seems like fontFamilyFallback does not work at all?Tahoma works. So i guess there is a problem in .AppleSystemUIFont and Inter font downloaded manually.