[Impeller] Text Outline not rendered accurately. #138670

PrimaryFeather · 2023-11-18T15:15:02Z

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Steps to reproduce

Text outlines as demonstrated in the official TextStyle class documentation are rendered inaccurately with Impeller.

Until Flutter 3.16, Impeller did not draw those outlines at all, so this is still a step forward. 😃
However, the quality of the rendering makes it ill-suited for most apps.

Expected results

The outline should be drawn clearly centered around the glyphs.

Actual results

The outline is offset a little compared to the actual shape of several glyphs.

If you compare the images more closely, you'll notice that it's actually not so much the outline that changes, but the actual glyphs drawn in the front. The animated GIF file below makes that easy to see.

(A side note: the "Debug" text on the top right is rendered much thinner with Impeller. Which could also indicate an issue with Impeller's text rendering.)

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(
      title: 'Text Outline Demo',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text("Text Outline Demo"),
        ),
        body: Center(
          child: Stack(
            children: <Widget>[
              // Stroked text as border.
              Text(
                'Greetings, planet!',
                style: TextStyle(
                  fontSize: 40,
                  foreground: Paint()
                    ..style = PaintingStyle.stroke
                    ..strokeWidth = 1
                    ..color = Colors.black,
                ),
              ),
              // Solid text as fill.
              Text(
                'Greetings, planet!',
                style: TextStyle(fontSize: 40, color: Colors.grey[300]),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Rendered with Skia	Rendered with Impeller

Note the difference (drawn with 8pt outline to emphasize):

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.16.0, on macOS 14.1.1 23B81 darwin-arm64, locale en-US)
    • Flutter version 3.16.0 on channel stable at /Users/redge/Shared/SDKs/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision db7ef5bf9f (3 days ago), 2023-11-15 11:25:44 -0800
    • Engine revision 74d16627b9
    • Dart version 3.2.0
    • DevTools version 2.28.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/redge/Library/Android/sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.14.2

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

[✓] Android Studio (version 2021.3)
    • 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
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.3.1)
    • IntelliJ at /Applications/IntelliJ IDEA.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.84.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.76.0

[✓] Connected device (5 available)
    • iPhone Mini Daniel (mobile)         • 00004110-001C412C2112401E                • ios            • iOS 17.1.1 21B91
    • iPhone SE (3rd generation) (mobile) • 259772D0-ABED-4542-9F2B-5C91883F1694     • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-0 (simulator)
    • macOS (desktop)                     • macos                                    • darwin-arm64   • macOS 14.1.1 23B81 darwin-arm64
    • Chrome (web)                        • chrome                                   • web-javascript • Google Chrome 119.0.6045.159

[✓] Network resources
    • All expected network resources are available.

• No issues found!

danagbemava-nc · 2023-11-20T08:18:59Z

Reproducible using the sample provided above.

screenshots(from master channel)

SKIA	IMPELLER

flutter doctor -v

[✓] Flutter (Channel stable, 3.16.0, on macOS 14.1.1 23B81 darwin-arm64, locale en-GB)
    • Flutter version 3.16.0 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision db7ef5bf9f (5 days ago), 2023-11-15 11:25:44 -0800
    • Engine revision 74d16627b9
    • Dart version 3.2.0
    • DevTools version 2.28.2

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0-rc1)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0-rc1
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode-15.0.0-Release.Candidate.app/Contents/Developer
    • Build 15A240d
    • CocoaPods version 1.13.0

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

[✓] Android Studio (version 2022.3)
    • Android Studio at /Users/nexus/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
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 76.3.4
    • Dart plugin version 232.10072.19

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

[✓] Connected device (4 available)
    • Nexus (mobile)       • 00008020-001875E83A38002E • ios            • iOS 17.1.1 21B91
    • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios            • iOS 17.1 21B74
    • macOS (desktop)      • macos                     • darwin-arm64   • macOS 14.1.1 23B81 darwin-arm64
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 119.0.6045.159

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.17.0-10.0.pre.61, on macOS 14.1.1 23B81 darwin-arm64, locale en-GB)
    • Flutter version 3.17.0-10.0.pre.61 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 d2b67d4cea (2 hours ago), 2023-11-20 01:06:28 -0500
    • Engine revision e916d5bfdd
    • Dart version 3.3.0 (build 3.3.0-149.0.dev)
    • DevTools version 2.30.0-dev.4
    • 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 34.0.0-rc1)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0-rc1
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode-15.0.0-Release.Candidate.app/Contents/Developer
    • Build 15A240d
    • CocoaPods version 1.13.0

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

[✓] Android Studio (version 2022.3)
    • Android Studio at /Users/nexus/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
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 76.3.4
    • Dart plugin version 232.10072.19

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

[✓] Connected device (4 available)
    • Nexus (mobile)       • 00008020-001875E83A38002E • ios            • iOS 17.1.1 21B91
    • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios            • iOS 17.1 21B74
    • macOS (desktop)      • macos                     • darwin-arm64   • macOS 14.1.1 23B81 darwin-arm64
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 119.0.6045.159

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

chinmaygarde · 2023-11-30T23:41:20Z

From Triage: The glyph atlases are populated similarly in both backends. So it is likely that we messed up passing an argument to the font while populating the atlas.

PrimaryFeather · 2024-03-28T16:03:23Z

Quick update: it's still the same output with Flutter v3.19.4.
It would be appreciated if somebody could take another look at this. 🙏

danagbemava-nc added the in triage Presently being triaged by the triage team label Nov 20, 2023

jonahwilliams added P2 Important issues not at the top of the work list triaged-engine Triaged by Engine team labels Nov 20, 2023

chinmaygarde changed the title ~~[Impeller] Text Outline not rendered accurately~~ [Impeller] Text Outline not rendered accurately. Nov 30, 2023

huycozy mentioned this issue Feb 27, 2024

[Impeller][Regression] Text: foreground paint not rendered correctly #144106

Closed

huycozy mentioned this issue Mar 14, 2024

Font rendered differently on Android and iOS #145069

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Impeller] Text Outline not rendered accurately. #138670

[Impeller] Text Outline not rendered accurately. #138670

PrimaryFeather commented Nov 18, 2023 •

edited

danagbemava-nc commented Nov 20, 2023

chinmaygarde commented Nov 30, 2023

PrimaryFeather commented Mar 28, 2024

[Impeller] Text Outline not rendered accurately. #138670

[Impeller] Text Outline not rendered accurately. #138670

Comments

PrimaryFeather commented Nov 18, 2023 • edited

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Flutter Doctor output

danagbemava-nc commented Nov 20, 2023

chinmaygarde commented Nov 30, 2023

PrimaryFeather commented Mar 28, 2024

PrimaryFeather commented Nov 18, 2023 •

edited