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

Transparent emojis on Android when using a bold TextStyle #16582

Open
modulovalue opened this Issue Apr 14, 2018 · 14 comments

Comments

Projects
None yet
7 participants
@modulovalue

modulovalue commented Apr 14, 2018

Emojis are transparent (again? #11108) when using a bold TextStyle.
Wasn't an issue before I updated from ~v0.2.1 to newest commit.

Works fine on iOS.

Steps to Reproduce

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Emoji missing Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(
        ),
        body: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text(
                'Emoji: 🍜 12345',
                style: new TextStyle(fontWeight: FontWeight.w900),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Flutter Doctor

[✓] Flutter (Channel master, v0.2.12-pre.33, on Mac OS X 10.13.4 17E199, locale de-DE)
• Flutter version 0.2.12-pre.33 at /Users/valauskasmodestas/Desktop/flutter
• Framework revision ea30c95 (2 hours ago), 2018-04-13 17:02:14 -0700
• Engine revision 76cb311d9c
• Dart version 2.0.0-dev.47.0.flutter-f76dad0adc

[!] Android toolchain - develop for Android devices (Android SDK 26.0.2)
• Android SDK at /Users/valauskasmodestas/Library/Android/sdk
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-27, build-tools 26.0.2
• Java binary at: /Applications/Android Studio 3.0 Preview.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-884-b01)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[✓] iOS toolchain - develop for iOS devices (Xcode 9.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 9.3, Build version 9E145
• ios-deploy 1.9.2
• CocoaPods version 1.3.1

[✓] Android Studio
• Android Studio at /Applications/Android Studio 3.0 Preview.app/Contents
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-884-b01)

[✓] IntelliJ IDEA Ultimate Edition (version 2017.2)
• IntelliJ at /Applications/IntelliJ IDEA.app
• Flutter plugin version 21.2.2
• Dart plugin version 172.3317.48

[✓] Connected devices (2 available)
• LG D802 • LGD8028d47a899 • android-arm • Android 5.0.2 (API 21)
• iPhone X • A1223CE9-152A-48EA-8C14-94C467CBF812 • ios • iOS 11.3 (simulator)

@chinmaygarde

This comment has been minimized.

Show comment
Hide comment
@chinmaygarde
Member

chinmaygarde commented Apr 15, 2018

@jason-simmons

This comment has been minimized.

Show comment
Hide comment
@jason-simmons

jason-simmons Apr 26, 2018

Contributor

This is a regression in Skia, introduced in:
google/skia@5ddb308

Filed https://bugs.chromium.org/p/skia/issues/detail?id=7878

Contributor

jason-simmons commented Apr 26, 2018

This is a regression in Skia, introduced in:
google/skia@5ddb308

Filed https://bugs.chromium.org/p/skia/issues/detail?id=7878

@SuitMonkeyB

This comment has been minimized.

Show comment
Hide comment
@SuitMonkeyB

SuitMonkeyB Aug 31, 2018

Has this issue gotten any further in being resolved?

SuitMonkeyB commented Aug 31, 2018

Has this issue gotten any further in being resolved?

@najeira

This comment has been minimized.

Show comment
Hide comment
@najeira

najeira Sep 3, 2018

Contributor

It occur with v0.5.1.

Contributor

najeira commented Sep 3, 2018

It occur with v0.5.1.

@zoechi zoechi added this to the Goals milestone Sep 3, 2018

@zoechi

This comment has been minimized.

Show comment
Hide comment
@zoechi

zoechi Sep 3, 2018

Contributor

@najeira can you please also check in beta 0.6.0?

Contributor

zoechi commented Sep 3, 2018

@najeira can you please also check in beta 0.6.0?

@najeira

This comment has been minimized.

Show comment
Hide comment
@najeira

najeira Sep 3, 2018

Contributor

The same issue has occurred with v0.6.0 and v0.7.5.

[✓] Flutter (Channel dev, v0.7.5, on Mac OS X 10.13.6 17G65, locale ja-JP)
    • Flutter version 0.7.5 at /Applications/flutter
    • Framework revision eab5cd9853 (4 days ago), 2018-08-30 14:47:04 -0700
    • Engine revision dc7b5eb89d
    • Dart version 2.1.0-dev.3.0.flutter-760a9690c2

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at /Users/najeira/Library/Android/sdk
    • Android NDK at /Users/najeira/Library/Android/sdk/ndk-bundle
    • Platform android-27, build-tools 27.0.3
    • ANDROID_HOME = /Users/najeira/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.4.1, Build version 9F2000
    • ios-deploy 1.9.2
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    • Dart plugin version 171.4424
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[✓] IntelliJ IDEA Ultimate Edition (version 2018.1)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 23.1.3
    • Dart plugin version 181.4203.498

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

my code:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(),
      body: new Center(
        child: Column(
          children: <Widget>[
            new Text("w100: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w100)),
            new Text("w200: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w200)),
            new Text("w300: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w300)),
            new Text("w400: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w400)),
            new Text("w500: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w500)),
            new Text("w600: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w600)),
            new Text("w700: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w700)),
            new Text("w800: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w800)),
            new Text("w900: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w900)),
          ],
        ),
      ),
    );
  }
}

2018-09-03 19 21 30

Contributor

najeira commented Sep 3, 2018

The same issue has occurred with v0.6.0 and v0.7.5.

[✓] Flutter (Channel dev, v0.7.5, on Mac OS X 10.13.6 17G65, locale ja-JP)
    • Flutter version 0.7.5 at /Applications/flutter
    • Framework revision eab5cd9853 (4 days ago), 2018-08-30 14:47:04 -0700
    • Engine revision dc7b5eb89d
    • Dart version 2.1.0-dev.3.0.flutter-760a9690c2

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at /Users/najeira/Library/Android/sdk
    • Android NDK at /Users/najeira/Library/Android/sdk/ndk-bundle
    • Platform android-27, build-tools 27.0.3
    • ANDROID_HOME = /Users/najeira/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.4.1, Build version 9F2000
    • ios-deploy 1.9.2
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    • Dart plugin version 171.4424
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[✓] IntelliJ IDEA Ultimate Edition (version 2018.1)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 23.1.3
    • Dart plugin version 181.4203.498

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

my code:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(),
      body: new Center(
        child: Column(
          children: <Widget>[
            new Text("w100: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w100)),
            new Text("w200: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w200)),
            new Text("w300: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w300)),
            new Text("w400: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w400)),
            new Text("w500: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w500)),
            new Text("w600: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w600)),
            new Text("w700: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w700)),
            new Text("w800: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w800)),
            new Text("w900: 😀😁😂", style: const TextStyle(fontWeight: FontWeight.w900)),
          ],
        ),
      ),
    );
  }
}

2018-09-03 19 21 30

@bungeman

This comment has been minimized.

Show comment
Hide comment
@bungeman

bungeman Sep 7, 2018

I think this was fixed in Skia with https://skia-review.googlesource.com/c/skia/+/150467 , which rolled into Flutter earlier this week.

bungeman commented Sep 7, 2018

I think this was fixed in Skia with https://skia-review.googlesource.com/c/skia/+/150467 , which rolled into Flutter earlier this week.

@bungeman

This comment has been minimized.

Show comment
Hide comment
@bungeman

bungeman Sep 7, 2018

Note that I've tried building the engine and running the example above with all new all the things, and I may be doing something wrong, but I'm still reproducing the original issue. Unfortunately, I can't seem to capture an skp which actually demonstrates the issue at the moment. However, putting some print statements down inside Skia shows that Skia's FreeType believes that Noto Color Emoji does not have a path, but Flutter's FreeType does seem to think that the same Noto Color Emoji does have a path. I'm not entirely sure what the difference between these FreeTypes might be, since even if I rebase Flutter's FreeType up to FreeType's (real) current master it seems to still think Noto Color Emoji has an outline. At this point I don't think Skia is really doing anything incorrectly, but something about the way FreeType is being built in Flutter maybe?

bungeman commented Sep 7, 2018

Note that I've tried building the engine and running the example above with all new all the things, and I may be doing something wrong, but I'm still reproducing the original issue. Unfortunately, I can't seem to capture an skp which actually demonstrates the issue at the moment. However, putting some print statements down inside Skia shows that Skia's FreeType believes that Noto Color Emoji does not have a path, but Flutter's FreeType does seem to think that the same Noto Color Emoji does have a path. I'm not entirely sure what the difference between these FreeTypes might be, since even if I rebase Flutter's FreeType up to FreeType's (real) current master it seems to still think Noto Color Emoji has an outline. At this point I don't think Skia is really doing anything incorrectly, but something about the way FreeType is being built in Flutter maybe?

@bungeman

This comment has been minimized.

Show comment
Hide comment
@bungeman

bungeman Sep 17, 2018

It appears that the Flutter build of FreeType is trying to autohint the glyph and creating an empty path instead of just bailing on the autohinting. I'm not sure why Skia's build isn't doing this, but if autohinting is forced the same behavior can be seen. I think this is an issue in FreeType (if a glyph doesn't have any outline at all it can't really be autohinted), I'll see if there's any way to work around it.

bungeman commented Sep 17, 2018

It appears that the Flutter build of FreeType is trying to autohint the glyph and creating an empty path instead of just bailing on the autohinting. I'm not sure why Skia's build isn't doing this, but if autohinting is forced the same behavior can be seen. I think this is an issue in FreeType (if a glyph doesn't have any outline at all it can't really be autohinted), I'll see if there's any way to work around it.

@jason-simmons

This comment has been minimized.

Show comment
Hide comment
@jason-simmons

jason-simmons Sep 17, 2018

Contributor

SkScalerContext_FreeType has code that sets the FT_LOAD_NO_AUTOHINT flag if kForceAutohinting_Flag is off. But it's gated behind an #ifdef SK_BUILD_FOR_ANDROID_FRAMEWORK:

https://github.com/google/skia/blob/master/src/ports/SkFontHost_FreeType.cpp#L880

The emoji in this example renders as expected if I remove the #ifdef.

Should this code be enabled in Flutter's build of Skia?

Contributor

jason-simmons commented Sep 17, 2018

SkScalerContext_FreeType has code that sets the FT_LOAD_NO_AUTOHINT flag if kForceAutohinting_Flag is off. But it's gated behind an #ifdef SK_BUILD_FOR_ANDROID_FRAMEWORK:

https://github.com/google/skia/blob/master/src/ports/SkFontHost_FreeType.cpp#L880

The emoji in this example renders as expected if I remove the #ifdef.

Should this code be enabled in Flutter's build of Skia?

@SuitMonkeyB

This comment has been minimized.

Show comment
Hide comment
@SuitMonkeyB

SuitMonkeyB Sep 17, 2018

I'm so happy this issue is progressing.

SuitMonkeyB commented Sep 17, 2018

I'm so happy this issue is progressing.

@bungeman

This comment has been minimized.

Show comment
Hide comment
@bungeman

bungeman Sep 18, 2018

A Skia change at https://skia.googlesource.com/skia/+/d6931bb0149d3bdfa89f1ba5cd129df180e343bd should work around this. A bug was filed against FreeType for this behavior with a proposed patch at https://savannah.nongnu.org/bugs/index.php?54681 .

bungeman commented Sep 18, 2018

A Skia change at https://skia.googlesource.com/skia/+/d6931bb0149d3bdfa89f1ba5cd129df180e343bd should work around this. A bug was filed against FreeType for this behavior with a proposed patch at https://savannah.nongnu.org/bugs/index.php?54681 .

@bungeman

This comment has been minimized.

Show comment
Hide comment
@bungeman

bungeman Sep 21, 2018

Both the Skia change and the FreeType change have landed now. The Skia change has rolled into flutter and I have observed the test in najeira's comment to work as expected on a current tip of tree build of flutter.

It is recommended that flutter's FreeType be rolled as well. While FreeType 2.10 hasn't been released yet, there are more than 260 commits since 2.9.1, a number of which are security and correctness fixes.

bungeman commented Sep 21, 2018

Both the Skia change and the FreeType change have landed now. The Skia change has rolled into flutter and I have observed the test in najeira's comment to work as expected on a current tip of tree build of flutter.

It is recommended that flutter's FreeType be rolled as well. While FreeType 2.10 hasn't been released yet, there are more than 260 commits since 2.9.1, a number of which are security and correctness fixes.

@zoechi

This comment has been minimized.

Show comment
Hide comment
@zoechi

zoechi Oct 8, 2018

Contributor

This is working in

[✓] Flutter (Channel master, v0.9.7-pre.62, on Mac OS X 10.13.6 17G65, locale en-AT)
    • Flutter version 0.9.7-pre.62 at /Users/zoechi/flutter/flutter
    • Framework revision 2c063b7ca5 (2 hours ago), 2018-10-08 08:45:24 +0200
    • Engine revision 572fa5646a
    • Dart version 2.1.0-dev.6.0.flutter-c6254163dc

but hasn't landed in dev or beta yet.

Contributor

zoechi commented Oct 8, 2018

This is working in

[✓] Flutter (Channel master, v0.9.7-pre.62, on Mac OS X 10.13.6 17G65, locale en-AT)
    • Flutter version 0.9.7-pre.62 at /Users/zoechi/flutter/flutter
    • Framework revision 2c063b7ca5 (2 hours ago), 2018-10-08 08:45:24 +0200
    • Engine revision 572fa5646a
    • Dart version 2.1.0-dev.6.0.flutter-c6254163dc

but hasn't landed in dev or beta yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment