Skip to content

[Impeller] Inconsistent Transform.scale Text Rendering #121887

@borjandev

Description

@borjandev

Steps to Reproduce

  1. Ensure that Flutter is running on the master channel at commit 3494c08
  2. Start iPhone 14 Pro Max Simulator on MacOS
  3. Execute flutter run -d iPhone --enable-impeller on the code sample.
  4. Execute flutter run -d iPhone on the code sample to compare the difference.

When using the Impeller renderer in combination with Transform.scale, depending on the scale, the letters get rendered very inconsistently, some thinner than others (even at same scale) , some higher / lower then others in terms of baseline, some letter edges even getting cut off sometimes.

Expected results:

Properly consistently rendered text.

ProperTWithSkia

Actual results:

Inconsistently rendered text, messed up baselines for a lot of letters, the lowercase "t" in the bottom sentence has different size (even at same scale) when compared to the top sentence "t".

This also happens with other letters at other scales.

ThinTWithImpeller

Comparison
SkiaVsImpeller

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: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Transform.scale(
          scale: 0.9,
          child: const Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                'The quick brown fox jumps over the lazy dog.',
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                  letterSpacing: -0.75,
                ),
              ),
              Text(
                'The quick brown fox jumping over the lazy dog.',
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                  letterSpacing: -0.75,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Logs
[!] Flutter (Channel master, 3.9.0-1.0.pre.33, on macOS 13.3 22E7752300f darwin-arm64, locale en-MK)
    • Flutter version 3.9.0-1.0.pre.33 on channel master at /Users/devops/fvm/versions/3494c084481eb11469ee18f2a5e0c1dd90cbe13f
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 3494c08448 (5 hours ago), 2023-03-03 12:54:23 +0000
    • Engine revision 569c62d110
    • Dart version 3.0.0 (build 3.0.0-290.0.dev)
    • DevTools version 2.22.2
    • 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.1)
    • Android SDK at /Users/devops/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 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 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)

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

[✓] VS Code (version 1.76.0-insider)
    • VS Code at /Applications/Visual Studio Code - Insiders.app/Contents
    • Flutter extension version 3.60.0

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listc: renderingUI glitches reported at the engine/skia or impeller rendering levele: impellerImpeller rendering backend issues and features requestsengineflutter/engine related. See also e: labels.found in release: 3.9Found to occur in 3.9has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyr: fixedIssue is closed as already fixed in a newer version

Type

No type

Projects

Relationships

None yet

Development

No branches or pull requests

Issue actions