Skip to content

[Impeller] Incorrect kerning with Impeller on 3.16 #140475

@Jjagg

Description

@Jjagg

Steps to reproduce

Draw text using the Lato font on Flutter 3.16 with Impeller enabled

Expected results

The kerning of the text is correct.

Actual results

The kerning of the text looks incorrect.

It seems like the issue is more noticeable on some devices than others and worse for specific fonts/sizes/weights.
The code sample below replicates some particularly bad cases we ran into in our app. The screenshots were taken on an iPhone XR simulator because the issue was very noticeable on it.

I found #127815 which mentions minor letter spacing differences with Impeller, but this case looks a lot worse and the issue is only introduced in Flutter 3.16.

Code sample

Code sample

This uses the google_fonts package.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

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

  @override
  Widget build(BuildContext context) {
    final lato = GoogleFonts.lato(fontSize: 15, color: Colors.black);
    final latoBold = lato.copyWith(fontWeight: FontWeight.bold);

    return MaterialApp(
      home: Container(
        color: Colors.white,
        child: DefaultTextStyle(
          style: lato,
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text('Injecteer', style: latoBold),
                const Text('We vergelijken'),
                const Text('vergelijken'),
                Text('Het gas', style: latoBold),
                const SizedBox(height: 12),
                Text('The quick brown fox jumps over the lazy dog',
                    style: latoBold),
                Text(
                    'A mad boxer shot a quick, gloved jab to\nthe jaw of his dizzy opponent.',
                    style: latoBold),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration
Flutter 3.13 (Impeller) ✅ Flutter 3.16 (No Impeller) ✅ Flutter 3.16 (Impeller) ❌
Impeller 3 13 No Impeller 3-16 Impeller 3-16

Here's a GIF cycling through in the order above. The frame it shows longer is the 3.16 Impeller one. All three are different, but only the scrot from 3.16 with Impeller looks very noticeably wrong.

GIF cycling through the three images

Logs

No response

Flutter Doctor output

Doctor output
impeller_kerning_bug> fvm flutter doctor -v
[!] Flutter (Channel stable, 3.16.3, on macOS 14.0 23A344 darwin-arm64, locale en-BE)
    • Flutter version 3.16.3 on channel stable at [...]/fvm/versions/3.16.3
    ! Warning: `flutter` on your path resolves to [...]/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at [...]/fvm/versions/3.16.3. Consider adding [...]/fvm/versions/3.16.3/bin to the front of your path.
    ! Warning: `dart` on your path resolves to [...]/flutter/bin/dart, which is not inside your current Flutter SDK checkout at 
 [...]/fvm/versions/3.16.3. Consider adding [...]/fvm/versions/3.16.3/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b0366e0a3f (2 weeks ago), 2023-12-05 19:46:39 -0800
    • Engine revision 54a7145303
    • Dart version 3.2.3
    • DevTools version 2.28.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)
    • Android SDK at [...]/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /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.1)
    • Xcode at /Applications/Xcode-13.4.1.app/Contents/Developer
    • Build 15C65
    • 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 /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)

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

[✓] Connected device (4 available)
    • [...]

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

! Doctor found issues in 1 category

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: typographyText rendering, possibly libtxte: impellerImpeller rendering backend issues and features requestsengineflutter/engine related. See also e: labels.found in release: 3.16Found to occur in 3.16found in release: 3.18Found to occur in 3.18has reproducible stepsThe issue has been confirmed reproducible and is ready to work onslimpellerEngine binary size reduction. go/slimpellerteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions