[Impeller] Fade Transition is not smooth #161374
Description
Steps to reproduce
- Create a FadeTransition (as shown in the example below, e.g. via an AnimatedSwitcher) for an object that has non-integer width and/or height.
- Enable Impeller for the platform (if it's not enabled by default).
- Look closely at the last frame of each transition.
Expected results
There should be a smooth, uniform transition.
Actual results
In the last frame of each transition, the object seems to "jump" slightly, probably one pixel to the top or left (depending on the axis that's not integer-sized).
(If you can't see it, try to resize the window; it's more pronounced in specific sizes.)
Code sample
Code sample
import 'package:flutter/material.dart';
void main() => runApp(const AnimatedSwitcherExampleApp());
class AnimatedSwitcherExampleApp extends StatelessWidget {
const AnimatedSwitcherExampleApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: AnimatedSwitcherExample(),
);
}
}
class AnimatedSwitcherExample extends StatefulWidget {
const AnimatedSwitcherExample({super.key});
@override
State<AnimatedSwitcherExample> createState() =>
_AnimatedSwitcherExampleState();
}
class _AnimatedSwitcherExampleState extends State<AnimatedSwitcherExample> {
int _count = 0;
final texts = ["these\nare", "the\nwords", "that are\na-looping"];
@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
return Stack(
children: [
Scaffold(
body: GestureDetector(
onTap: () => setState(() {
_count += 1;
}),
child: Center(
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
transitionBuilder:
(Widget child, Animation<double> animation) =>
FadeTransition(opacity: animation, child: child),
child: Container(
key: ValueKey(_count),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(width: 1.5),
borderRadius: BorderRadius.circular(12),
),
padding: EdgeInsets.all(30),
child: SizedBox(
width: 100.5,
height: 50.5,
child: Text(
textAlign: TextAlign.center,
texts[_count % texts.length],
style: textTheme.bodyLarge,
),
),
),
),
),
),
),
],
);
}
}Screenshots or Video
Screenshots / Video demonstration
This is the result with Impeller:
And here what it's like with Skia:
(Both recorded on macOS, but the same happens on iOS.)
Logs
No response
Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.27.1, on macOS 15.2 24C101 darwin-arm64, locale en-US)
• Flutter version 3.27.1 on channel stable at /Users/redge/Shared/SDKs/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 17025dd882 (3 weeks ago), 2024-12-17 03:23:09 +0900
• Engine revision cb4b5fff73
• Dart version 3.6.0
• DevTools version 2.40.2
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/redge/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.11+0-17.0.11b1207.24-11852314)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16C5032a
• CocoaPods version 1.16.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2024.1)
• 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.11+0-17.0.11b1207.24-11852314)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.3.1)
• IntelliJ at /Applications/IntelliJ IDEA.app
• 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
[✓] VS Code (version 1.96.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.103.20241202
[✓] Connected device (5 available)
• iPhone Mini Daniel (mobile) • 00008110-001C410C2112401E • ios • iOS 18.2.1 22C161
• iPhone 16 (mobile) • B9B5999D-DCE4-4BF0-B873-61EBDDA1D290 • ios • com.apple.CoreSimulator.SimRuntime.iOS-18-2 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 15.2 24C101 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 15.2 24C101 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 131.0.6778.205
! Error: Browsing on the local area network for Daniels iPad Air. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources
• All expected network resources are available.
• No issues found!