[Impeller] Different font weight vs Skia (light on dark)

Starting from Flutter 3.10, Impeller is used by default on iOS. Small text seems to render noticeably different

Steps to reproduce

Create new app
Place light text on dark background

ColoredBox(
  color: Colors.black,
  child: Text('Hello', style: TextStyle(color: Colors.white)),
)

Run the app with Flutter 3.10.2 on iOS

Expected results

The text should render like in Skia

Actual results

The text renders thinner

Details

Full 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 const MaterialApp(
      home: Material(
        color: Colors.black,
        child: Center(
          child: Text(
            'Hello',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

To reproduce old Skia behavior on Flutter 3.10

flutter run --no-enable-impeller

To crop and scale screenshot (iPhone 14):

convert screenshot.png -gravity center -crop 100x40+0+0 -scale 800% out.png

Tools versions

Flutter (Channel stable, 3.10.2, on macOS 13.3.1 22E261 darwin-arm64, locale en-RU)
Xcode - develop for iOS and macOS (Xcode 14.3)
Android Studio (version 2022.2)

Flutter 3.10.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 9cd3d0d9ff (6 days ago) • 2023-05-23 20:57:28 -0700
Engine • revision 90fa3ae28f
Tools • Dart 3.0.2 • DevTools 2.23.1

All the same on master:

Flutter 3.11.0-14.0.pre.70 • channel master •
https://github.com/flutter/flutter.git
Framework • revision bd11ef06fd (8 hours ago) • 2023-05-29 11:50:25 -0400
Engine • revision f768be1078
Tools • Dart 3.1.0 (build 3.1.0-155.0.dev) • DevTools 2.23.1

Note: if we swap the colors (dark on light), Impeller font weight matches Skia (could have been fixed in #119234)

Skia

Impeller

The only thing which still looks wrong is kerning: #127815

Just noticed that native version looks more similar to Impeller than Skia

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello")
        .font(.system(size: 14))
        .foregroundColor(.white)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .ignoresSafeArea()
        .background(.black)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

So maybe it was Skia that was wrong 🤔

@PiN73

Hi @PiN73
Thanks for the detailed report! However, this is a known issue being tracked at #120857. You can take a look at #120857 (comment) that also compared different between Skia and Impeller. Per your last test on iOS native, it matched with Impeller output.

Since Impeller is enabled by default from 3.10, I assume this issue has been fixed. If you still go with Skia, please follow #120857 for further updates.

Closing the issue as a duplicate. Thank you!

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.

Navigation Menu

Repository navigation

[Impeller] Different font weight vs Skia (light on dark) #127810

Steps to reproduce

Expected results

Actual results

Details

Skia

Impeller

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Impeller] Different font weight vs Skia (light on dark) #127810

Description

Steps to reproduce

Expected results

Actual results

Details

Activity

PiN73 commented on May 29, 2023

Skia

Impeller

PiN73 commented on May 29, 2023

huycozy commented on May 30, 2023

github-actions commented on Jun 13, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions