Repository navigation
[Impeller] Jittery glyphs when animating text transformation #149652
Description
Steps to reproduce
-
Run the sample code (wraps a Text widget within an animation-controlled Transform widget).
-
Tap the text to trigger the scale animation and reproduce the issue.
Note: The issue can also reproduced with other Transfom type such as X/Y position. It can be reproduced with packages such as marquee (position animation) or bounce (scale and rotation animation).
Expected results
Spacing between glyphs should be constant across the entire animation, like when using Skia.
Actual results
Glyphs are jittering throughout the animation, making the spacing between glyphs inconsistent when animated.
The video recordings were taken on a physical iPhone XR because the issue was very noticeable on it.
@jonahwilliams IMHO, this looks very similar to some other typography issues (#140475, #138386 or #127815), which were fixed by flutter-team-archive/engine#53042 a few days ago. Although static text now looks great, unfortunately it did not fix this specific issue during animations. Maybe some kind of rounding error is remaining ?
@chinmaygarde This is the last issue preventing us from opting in to Impeller for our production apps — should it be part of Slimpeller's last blockers before opt-out is no longer supported ? (xref #144739, #144439)
Issues aside, Impeller is truly incredible and performance improvements are outstanding compared to the previous engine. It really does feel native, now. Thanks and congratulations to the Flutter teams for this amazing project!
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
late final controller = AnimationController(vsync: this, duration: const Duration(seconds: 2));
TextStyle? get textStyle =>
Theme.of(context).textTheme.headlineLarge?.copyWith(fontSize: 50.0, fontWeight: FontWeight.bold);
bool isScaled = false;
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) => MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xffffffff))),
home: Scaffold(
body: GestureDetector(
onTap: _onTap,
child: Center(
child: AnimatedBuilder(
animation: controller,
builder: (_, child) => Transform.scale(
scale: 0.7 + (CurvedAnimation(parent: controller, curve: Curves.easeInOutCubic).value * 0.3),
child: child,
),
child: Center(child: Text('Large headline', style: textStyle))),
),
),
),
);
void _onTap() => setState(() {
isScaled = !isScaled;
if (isScaled) {
controller.forward();
} else {
controller.reverse();
}
});
}Screenshots or Video
Screenshots / Video demonstration
IMPORTANT NOTE: Please watch the videos in fullscreen, as the small web viewport causes an overall aliasing effect which makes the difference almost un-noticeable. Ideally, you can open it in your native video player.
| Skia ✅ | Impeller ⛔ |
|---|---|
Skia.mov |
Impeller.mov |
Logs
Logs
Flutter Doctor output
Doctor output
[✓] Flutter (Channel master, 3.23.0-13.0.pre.87, on macOS 14.5 23F79 darwin-arm64, locale en)
• Flutter version 3.23.0-13.0.pre.87 on channel master at /Users/redacted/Documents/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision c246ecdf8e (8 hours ago), 2024-06-03 18:06:22 -0700
• Engine revision a6aa5d8266
• Dart version 3.5.0 (build 3.5.0-218.0.dev)
• DevTools version 2.36.0
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/redacted/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = /Users/redacted/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15F31d
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2023.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.10+0-17.0.10b1087.21-11572160)
[✓] VS Code (version 1.89.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.90.0
[✓] Connected device (5 available)
• iPhone de Dev (mobile) • redacted • ios • iOS 17.4.1 21E236
• macOS (desktop) • macos • darwin-arm64 • macOS 14.5 23F79 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.5 23F79 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 125.0.6422.141
[✓] Network resources
• All expected network resources are available.
• No issues found!Metadata
Metadata
Assignees
Labels
Type
Projects
- Status
Activity
darshankawar commentedon Jun 4, 2024
Thanks for the report. I was able to replicate this on latest master and stable version with impeller.
stable, master flutter doctor -v
jonahwilliams commentedon Jun 5, 2024
This is definitely jitterier in Impeller than Skia, so we could probaly do a bit better here. After fixing all of the other text bugs I have to say I don't really have it in me to take on another one this quarter, so I'd kick this one over to @bdero or @chinmaygarde .
@mrcendre Aside from fixing this, the transformation is still slightly jumpy in Skia too: since you're essentially resizing the font you will hit different breakpoints that change the apparent size. Setting a filter quality on the transformation will scale the rasterized text instead of the text size, which should look better on all platforms and renderers.
63 remaining items
[Impeller] backfilling TextContents unit tests (flutter#161625)
Fixed some floating point inaccuracies in TextContents (flutter#162351)
Increased the glyph atlas resolution 2x (flutter#162555)
Fixed translated text's subpixel alignment. (flutter#162824)
[Impeller] backfilling TextContents unit tests (flutter#161625)
Fixed some floating point inaccuracies in TextContents (flutter#162351)
Increased the glyph atlas resolution 2x (flutter#162555)
Fixed translated text's subpixel alignment. (flutter#162824)
Backfill subpixel unit tests (#162710)
[CP] all jittery glyph fixes (#163058)
github-actions commentedon Feb 24, 2025
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 -vand a minimal reproduction of the issue.