Skip to content

[web][3.7] Emojis are not properly rendered #119536

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
KnucklesEQ opened this issue Jan 30, 2023 · 74 comments · Fixed by flutter/engine#40666 or flutter/engine#55908
Closed

[web][3.7] Emojis are not properly rendered #119536

KnucklesEQ opened this issue Jan 30, 2023 · 74 comments · Fixed by flutter/engine#40666 or flutter/engine#55908
Labels
a: typography Text rendering, possibly libtxt c: regression It was better in the past than it is now c: rendering UI glitches reported at the engine/skia or impeller rendering level engine flutter/engine repository. See also e: labels. found in release: 3.7 Found to occur in 3.7 has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list platform-web Web applications specifically r: fixed Issue is closed as already fixed in a newer version team-web Owned by Web platform team triaged-web Triaged by Web platform team

Comments

@KnucklesEQ
Copy link

Hi!

After installing the latest Flutter version (3.7), we noticed in our apps that the emojis in general (and emoji flags in particular) are flat, without colour.

Am I missing something? Is there a logical reason for this change? We didn't find any info related in the changelog of Flutter 3.7.

We tried to use the Noto Color Emoji in our last web application, but the app hangs many seconds to load the icons.

Steps to Reproduce

You can copy the code in DartPad:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.blueGrey,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String k = 'ES';

    String flag = k
        .toUpperCase()
        .split('')
        .map((char) => 127397 + char.codeUnitAt(0))
        .map((code) => String.fromCharCode(code))
        .join();
    return Text(flag);
  }
}

Expected results:

This happens in Flutter 3.3.10:
imagen

imagen

Actual results:

This happens in Flutter 3.7:
imagen

imagen

--
Thanks!

@FXschwartz
Copy link

@KnucklesEQ Testing this in dartpad shows the same thing. But testing on the master channel (Flutter 3.7.0-28.0.pre.20) works correctly for me. Can you try testing on master as well and see if it is fixed for you?

@danagbemava-nc danagbemava-nc added the in triage Presently being triaged by the triage team label Jan 31, 2023
@danagbemava-nc
Copy link
Member

I can reproduce the issue only when I do not include the NotoColorEmoji font.

Hi @KnucklesEQ, is this the same case for you as well?

without NotoColorEmoji with NotoColorEmoji
Screenshot 2023-01-31 at 08 35 16 Screenshot 2023-01-31 at 08 36 16

@danagbemava-nc danagbemava-nc added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jan 31, 2023
@KnucklesEQ
Copy link
Author

@KnucklesEQ Testing this in dartpad shows the same thing. But testing on the master channel (Flutter 3.7.0-28.0.pre.20) works correctly for me. Can you try testing on master as well and see if it is fixed for you?

I build our last web app with Flutter Master:

Flutter is already up to date on channel master
Flutter 3.7.0-31.0.pre.25 • channel master • https://github.com/flutter/flutter.git
Framework • revision 2c34a88eb8 (hace 79 minutos) • 2023-01-31 02:28:09 -0500
Engine • revision 72abe0e4b8
Tools • Dart 3.0.0 (build 3.0.0-179.0.dev) • DevTools 2.20.1

The problem still persist:
imagen

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jan 31, 2023
@KnucklesEQ
Copy link
Author

KnucklesEQ commented Jan 31, 2023

I can reproduce the issue only when I do not include the NotoColorEmoji font.

Hi @KnucklesEQ, is this the same case for you as well?
without NotoColorEmoji with NotoColorEmoji
...

Hi @danagbemava-nc

Yes, it works with the NotoColorEmoji font:

imagen

But the problem with this font is that it is HUGE.

When I load it using the Google Fonts package, the app hangs for about 5 to 10 seconds while it downloads. And if I add the font to the assets folder, it's so huge in size (22MB vs 200-300KB of a regular font).

And as mentioned here (#119602 (comment)), if the user enters an emoji in a TextField, you can't get it to display correctly with NotoColorEmoji.

That's why I wrote this issue, I don't understand that NotoColorEmoji is a solution.

@danagbemava-nc danagbemava-nc changed the title Problem with flag emojis in Flutter 3.7 [Web][Canvaskit][3.7] Emojis are not properly rendered Jan 31, 2023
@danagbemava-nc
Copy link
Member

danagbemava-nc commented Jan 31, 2023

Thanks for the info.

I can confirm that entering emojis into a Textfield does not work as expected. See the screenshots below. When using the NotoColorEmoji with Text widgets, that works, but it doesn’t appear to be a solution for every case.

Upon further investigation (based on #119536 (comment)), I found that this issue reproduces on windows as well.

However, when I use the emoji keyboard on windows, I do not have any issues

Side Note: this worked just fine in stable 3.3.10, but appears to have broken on 3.7.0

Labeling for further investigation.

screenshots

Web

canvaskit HTML
Screenshot 2023-01-31 at 13 04 20 Screenshot 2023-01-31 at 13 05 31

Windows

entering emoji in textfields displaying flag emoji
code sample
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.blueGrey,
      ),
      debugShowCheckedModeBanner: false,
      home:  Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              MyWidget(),
              TextField()
            ],
          ),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    String k = 'ES';

    String flag = k
        .toUpperCase()
        .split('')
        .map((char) => 127397 + char.codeUnitAt(0))
        .map((code) => String.fromCharCode(code))
        .join();
    return Text(flag);
  }
}
flutter doctor -v
[✓] Flutter (Channel stable, 3.7.0, on macOS 13.1 22C65 darwin-arm64, locale en-GB)
    • Flutter version 3.7.0 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b06b8b2710 (8 days ago), 2023-01-23 16:55:55 -0800
    • Engine revision b24591ed32
    • Dart version 2.19.0
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 2022.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[!] Android Studio (version 2022.1)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2022.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.74.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.58.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.1 22C65 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 109.0.5414.119

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 2 categories.
[!] Flutter (Channel master, 3.7.0-31.0.pre.24, on macOS 13.1 22C65 darwin-arm64, locale en-GB)
    • Flutter version 3.7.0-31.0.pre.24 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7ba440655a (9 hours ago), 2023-01-30 20:37:21 -0800
    • Engine revision 9448f2966c
    • Dart version 3.0.0 (build 3.0.0-179.0.dev)
    • DevTools version 2.20.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 2022.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[!] Android Studio (version 2022.1)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2022.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.74.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.58.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.1 22C65 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 109.0.5414.119

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 3 categories.

Platforms I have personally tested

Platform Does issue reproduce
iOS
macOS
windows desktop
HTML
canvaskit
android

❌: Issue does not reproduce
✅: Issue reproduces

Edit: added more info about platforms

@danagbemava-nc danagbemava-nc added c: regression It was better in the past than it is now engine flutter/engine repository. See also e: labels. a: typography Text rendering, possibly libtxt c: rendering UI glitches reported at the engine/skia or impeller rendering level e: web_canvaskit CanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Web has reproducible steps The issue has been confirmed reproducible and is ready to work on found in release: 3.7 Found to occur in 3.7 and removed in triage Presently being triaged by the triage team labels Jan 31, 2023
@KnucklesEQ
Copy link
Author

Thanks @danagbemava-nc

We did some additional research, and we found also that something similar happens in Linux Desktop and in Windows Desktop:

  • In Linux:

imagen

  • In Windows:

imagen

It's not the same case as Web. In Linux and Windows I don't see the flag with an 'ES' in it, I see only the two characters separated. Maybe this is not just a Canvaskit issue?

PS: The Android version of the app works fine.

@danagbemava-nc danagbemava-nc changed the title [Web][Canvaskit][3.7] Emojis are not properly rendered [Engine][3.7] Emojis are not properly rendered Feb 1, 2023
@danagbemava-nc danagbemava-nc added engine flutter/engine repository. See also e: labels. and removed engine flutter/engine repository. See also e: labels. e: web_canvaskit CanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Web labels Feb 1, 2023
@danagbemava-nc
Copy link
Member

Hi @KnucklesEQ, what linux distro did you test on? I asked my colleague (@huycozy) to check on his linux machine but it worked just fine for him on both stable and master. He's running Ubuntu 22.04.1 LTS 5.15.0-58-generic

@danagbemava-nc danagbemava-nc added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 1, 2023
@KnucklesEQ
Copy link
Author

KnucklesEQ commented Feb 1, 2023

Hi @danagbemava-nc

I'm using Debian GNU/Linux 11 (bullseye) stable, with kernel Linux 5.10.0-21-amd64 x86_64.

This is the info from flutter doctor:

[✓] Linux toolchain - develop for Linux desktop
    • Debian clang version 11.0.1-2
    • cmake version 3.18.4
    • ninja version 1.10.1
    • pkg-config version 0.29.2

On Windows, I tested the app on Windows 10.

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 1, 2023
@while-loop
Copy link

while-loop commented Feb 4, 2023

Adding another data point to this issue.

Building web v3.7.0 w/ canvaskit shows monochrome emojis. On:

  • Linux Chrome browser
  • Android Chrome browser
  • iOS Safari & Chrome browser.

Downgrading to v3.3.10 shows the correct emoji on the devices list above ☝️

flutter docker -v
[!] Flutter (Channel stable, 3.7.0, on Ubuntu 20.04.1 LTS 5.8.0-34-generic, locale en_US.UTF-8)
    • Flutter version 3.7.0 on channel stable at /home/anthony/fvm/versions/3.7.0
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b06b8b2710 (11 days ago), 2023-01-23 16:55:55 -0800
    • Engine revision b24591ed32
    • Dart version 2.19.0
    • DevTools version 2.20.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 10.0.0-4ubuntu1
    • cmake version 3.16.3
    • ninja version 1.10.0
    • pkg-config version 0.29.1

[✓] Connected device (2 available)
    • Chrome (web)    • chrome • web-javascript • Google Chrome 108.0.5359.124

@chinmaygarde chinmaygarde added the P2 Important issues not at the top of the work list label Feb 6, 2023
@T-P-F
Copy link

T-P-F commented Jun 29, 2024

We need to document useColorEmoji

Yeah, it is only knowable via SO currently :)

@vantian
Copy link

vantian commented Jul 11, 2024

I used useColorEmoji in my index.html, it's works fine on my local. but when I'm deploying to my Firebase it's still showing black & white. I'm totally lost here.

@double12

This comment was marked as duplicate.

@otopba
Copy link

otopba commented Jul 17, 2024

Please add documentation how to use useColorEmoji

@rafalplonka
Copy link

rafalplonka commented Jul 17, 2024

@otopba

In the index.html you can do:
<script src="flutter_bootstrap.js" async></script>

And at the same file level create a flutter_bootstrap.js file with this content:

{{flutter_js}}
{{flutter_build_config}}

// Customize the app initialization process
_flutter.loader.load({
   serviceWorkerSettings: {
      serviceWorkerVersion: {{flutter_service_worker_version}},
   },
    onEntrypointLoaded: async function(engineInitializer) {
        const appRunner = await engineInitializer.initializeEngine({
            useColorEmoji: true
        });

        await appRunner.runApp();
    }

});

This did a trick for me

@taufiq-husain
Copy link

@otopba

In the index.html you can do: <script src="flutter_bootstrap.js" async></script>

And at the same file level create a flutter_bootstrap.js file with this content:

{{flutter_js}}
{{flutter_build_config}}

// Customize the app initialization process
_flutter.loader.load({
    onEntrypointLoaded: async function(engineInitializer) {
        const appRunner = await engineInitializer.initializeEngine({
            useColorEmoji: true
        });

        await appRunner.runApp();
    }

});

This did a trick for me

This worked for me too. I didn't understand why the iOS app, Android app, iOS web, and Android web all showed colorful emojis but not the desktop web. So then I researched and found out it was a CanvasKit specific issue. All the other solutions led me to the index.html file in the web directory but Flutter upgrades must've removed it because it used to show JS code inside of the index.html file but now it doesn't. Anyway, thank you so much because this is the best solution and it works well!

@jonahwilliams jonahwilliams changed the title [Engine][3.7] Emojis are not properly rendered [web][3.7] Emojis are not properly rendered Sep 8, 2024
@jonahwilliams jonahwilliams added team-web Owned by Web platform team and removed team-engine Owned by Engine team platform-windows Building on or for Windows specifically platform-linux Building on or for Linux specifically labels Sep 8, 2024
@yjbanov yjbanov added platform-web Web applications specifically triaged-web Triaged by Web platform team labels Sep 12, 2024
@flutter-triage-bot flutter-triage-bot bot removed the triaged-engine Triaged by Engine team label Sep 12, 2024
@flutter-triage-bot
Copy link

The triaged-engine label is irrelevant if there is no team-engine label or fyi-engine label.

@maRci002
Copy link
Contributor

maRci002 commented Oct 1, 2024

@otopba

In the index.html you can do: <script src="flutter_bootstrap.js" async></script>

And at the same file level create a flutter_bootstrap.js file with this content:

{{flutter_js}}
{{flutter_build_config}}

// Customize the app initialization process
_flutter.loader.load({
    onEntrypointLoaded: async function(engineInitializer) {
        const appRunner = await engineInitializer.initializeEngine({
            useColorEmoji: true
        });

        await appRunner.runApp();
    }

});

This did a trick for me

This one works; however, serviceWorker won't be used. If you want to use serviceWorker, here's how flutter_bootstrap.js should look. For more information, visit: https://docs.flutter.dev/platform-integration/web/initialization#the-_flutter-loader-load-api

{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load({
  serviceWorkerSettings: {
    serviceWorkerVersion: {{flutter_service_worker_version}},
  },
  onEntrypointLoaded: async function(engineInitializer) {
    const appRunner = await engineInitializer.initializeEngine({
        useColorEmoji: true
    });

    await appRunner.runApp();
  },
});

@komakur
Copy link

komakur commented Oct 9, 2024

Have no idea if it's related, but after upgrading Flutter web app from 3.19.6 to 3.24.0 the Apple emojis started looking like Google ones. Which doens't fit into the app style. Setting useColorEmoji: true only fixes the color, but not the emojis style.

To fix this you can add Apple emojis font to pubspec, but the file size is 180 mb, so it's not a solution at all.

Any workaround how to fix this?

@ditman
Copy link
Member

ditman commented Oct 16, 2024

Any workaround how to [render Apple emojis]?

@komakur for now, only the Noto color emojis are available. We want to (maybe) render emoji using system fonts, but that's not designed/specced yet!

(I think a new issue is warranted for that feature request, if you can create a new one!)

@ditman
Copy link
Member

ditman commented Oct 16, 2024

(PS: Look at @mdebbar's PR above, he's removing the need for useColorEmoji: true!)

@danagbemava-nc danagbemava-nc added the r: fixed Issue is closed as already fixed in a newer version label Oct 21, 2024
Copy link

github-actions bot commented Nov 6, 2024

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Nov 6, 2024
nick9822 pushed a commit to nick9822/flutter that referenced this issue Dec 18, 2024
- Enable support for WOFF2 fonts.
- Add Brotli depndency (increases CK size by ~53KB compressed, including the Brotli dictionary).
- Use split WOFF2 fonts for Emoji.
- Remove the `useColorEmoji` runtime config flag.

Partially based off of flutter/engine#41282
Fixes flutter#119536
Contributes to flutter#153974 and opens the door for moving more fonts to WOFF2.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a: typography Text rendering, possibly libtxt c: regression It was better in the past than it is now c: rendering UI glitches reported at the engine/skia or impeller rendering level engine flutter/engine repository. See also e: labels. found in release: 3.7 Found to occur in 3.7 has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list platform-web Web applications specifically r: fixed Issue is closed as already fixed in a newer version team-web Owned by Web platform team triaged-web Triaged by Web platform team
Projects
None yet