[Impeller] Incorrect Transform.scale child position when setting filterQuality #121893
Description
Steps to Reproduce
- Ensure that Flutter is running on the master channel at commit 3494c08
- Start iPhone 14 Pro Max Simulator on MacOS
- Execute
flutter run -d iPhone --enable-impelleron the code sample. - Execute
flutter run -d iPhoneon the code sample to compare the difference.
When using the Impeller renderer in combination with Transform.scale, when setting the filterQuality: to any value, ex: FilterQuality.high the child widget is rendered at an incorrect position (taps and other gestures are also hitting wrong coordinates)
Expected results:
Properly centred text widget
Actual results:
Wrongly positioned text widget in the top left corner
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.2,
filterQuality: FilterQuality.high,
child: const Text(
'The quick brown fox jumps over the lazy dog.',
style: TextStyle(
fontSize: 100,
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
/cc @exaby73 @chinmaygarde @jonahwilliams @luckysmg
Could be related to:
Setting FilterQuality.high potentially resolves #121887 but is not useable because of this issue which renders the child in the wrong position.
These issues related to Transform.scale are particularly bad, because a lot of frameworks use them such as https://pub.dev/packages/responsive_framework in order to implement different device frames / UI scaling.
As of right now, using a framework which depends on Transform.scale to scale UI makes any text content look very unprofessional as noted in #121887