[Impeller] Visual glitches during animation on Redmi Note 8T (Adreno 610)

Steps to reproduce

Create a Flutter app that includes animations.
Enable Impeller.
Run the app in release mode on a device with Adreno 610 GPU (Redmi Note 8T in my case).

This issue is very similar to #153762.
I was able to fix the issue by disabling Adreno 610 in my locally built Flutter engine like this commit flutter-team-archive/engine#56216.

I ran the following command to run the engine locally

flutter run --release --local-engine-src-path $HOME/engine/src --local-engine=android_release_arm64 --local-engine-host=host_release_arm64 

Launching lib/main.dart on Redmi Note 8T in release mode...
warning: [options] source value 8 is obsolete and will be removed in a future release
warning: [options] target value 8 is obsolete and will be removed in a future release
warning: [options] To suppress warnings about obsolete options, use -Xlint:-options.
3 warnings
Running Gradle task 'assembleRelease'...                           14.8s
✓ Built build/app/outputs/flutter-apk/app-release.apk (7.2MB)
Installing build/app/outputs/flutter-apk/app-release.apk...      1,945ms

Flutter run key commands.
h List all available interactive commands.
c Clear the screen
q Quit (terminate the application on the device).
I/flutter (17293): [INFO:flutter/shell/platform/android/android_context_vk_impeller.cc(64)] Known bad Vulkan driver encountered, falling back to OpenGLES.
I/flutter (17293): [IMPORTANT:flutter/shell/platform/android/android_context_gl_impeller.cc(79)] Using the Impeller rendering backend (OpenGLES).

Expected results

Animations should render smoothly without any visual glitches, flickering, or tearing.

Actual results

There are visual glitches during animation.
This issue occurs even when I am animating a single circle or just widgets without CustomPainter.
Visual glitches cannot be caputured using a screen recorder.

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(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late final _controller =
      AnimationController(vsync: this, duration: const Duration(seconds: 3))
        ..repeat();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: CirclePainter(_controller),
        child: const SizedBox.expand(),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  final _paint = Paint()..color = Colors.blue;
  final AnimationController controller;

  CirclePainter(this.controller) : super(repaint: controller);

  @override
  void paint(Canvas canvas, Size size) {
    for (double i = 0; i < 3; i++) {
      final circle = Offset(100 * i + 90, size.height * controller.value);
      canvas.drawCircle(circle, 40, _paint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

Screenshots or Video

Screenshots / Video demonstration

PXL_20241205_040940078.mp4

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel main, 3.27.0-1.0.pre.710, on macOS 15.1.1 24B91 darwin-arm64, locale en-US)
    • Flutter version 3.27.0-1.0.pre.710 on channel main at /Users/fayaz/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f89546caab (6 hours ago), 2024-12-04 19:59:25 -0500
    • Engine revision 8d3c718400
    • Dart version 3.7.0 (build 3.7.0-209.0.dev)
    • DevTools version 2.41.0

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at /Users/fayaz/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • ANDROID_HOME = /Users/fayaz/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16B40
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.2)
    • 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 21.0.3+-79915917-b509.11)

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

[✓] Connected device (4 available)
    • Redmi Note 8T (mobile)          • 25406050              • android-arm64  • Android 11 (API 30)
    • macOS (desktop)                 • macos                 • darwin-arm64   • macOS 15.1.1 24B91 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         • macOS 15.1.1 24B91 darwin-arm64
    • Chrome (web)                    • chrome                • web-javascript • Google Chrome 131.0.6778.108

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Thanks for the report. I tried on S10+ device but wasn't able to replicate this. Seems specific to the device mentioned.
I will keep this issue open and label for team's tracking.

@fayax555

Steps to reproduce

Create a Flutter app that includes animations.
Enable Impeller.
Run the app in release mode on a device with Adreno 610 GPU (Redmi Note 8T in my case).

This issue is very similar to #153762.
I was able to fix the issue by disabling Adreno 610 like this commit flutter-team-archive/engine#56216.

I ran the following command to run the engine locally

flutter run --release --local-engine-src-path $HOME/engine/src --local-engine=android_release_arm64 --local-engine-host=host_release_arm64 

Launching lib/main.dart on Redmi Note 8T in release mode...
warning: [options] source value 8 is obsolete and will be removed in a future release
warning: [options] target value 8 is obsolete and will be removed in a future release
warning: [options] To suppress warnings about obsolete options, use -Xlint:-options.
3 warnings
Running Gradle task 'assembleRelease'...                           14.8s
✓ Built build/app/outputs/flutter-apk/app-release.apk (7.2MB)
Installing build/app/outputs/flutter-apk/app-release.apk...      1,945ms

Flutter run key commands.
h List all available interactive commands.
c Clear the screen
q Quit (terminate the application on the device).
I/flutter (17293): [INFO:flutter/shell/platform/android/android_context_vk_impeller.cc(64)] Known bad Vulkan driver encountered, falling back to OpenGLES.
I/flutter (17293): [IMPORTANT:flutter/shell/platform/android/android_context_gl_impeller.cc(79)] Using the Impeller rendering backend (OpenGLES).

Expected results

Animations should render smoothly without any visual glitches, flickering, or tearing.

Actual results

There are visual glitches during animation.
This issue occurs even when I am animating a single circle or just widgets without CustomPainter.
Visual glitches cannot be caputured using a screen recorder.

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(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late final _controller =
      AnimationController(vsync: this, duration: const Duration(seconds: 3))
        ..repeat();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: CirclePainter(_controller),
        child: const SizedBox.expand(),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  final _paint = Paint()..color = Colors.blue;
  final AnimationController controller;

  CirclePainter(this.controller) : super(repaint: controller);

  @override
  void paint(Canvas canvas, Size size) {
    for (double i = 0; i < 3; i++) {
      final circle = Offset(100 * i + 90, size.height * controller.value);
      canvas.drawCircle(circle, 40, _paint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

Screenshots or Video

Screenshots / Video demonstration

PXL_20241205_040940078.mp4

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel main, 3.27.0-1.0.pre.710, on macOS 15.1.1 24B91 darwin-arm64, locale en-US)
    • Flutter version 3.27.0-1.0.pre.710 on channel main at /Users/fayaz/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f89546caab (6 hours ago), 2024-12-04 19:59:25 -0500
    • Engine revision 8d3c718400
    • Dart version 3.7.0 (build 3.7.0-209.0.dev)
    • DevTools version 2.41.0

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at /Users/fayaz/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • ANDROID_HOME = /Users/fayaz/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16B40
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.2)
    • 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 21.0.3+-79915917-b509.11)

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

[✓] Connected device (4 available)
    • Redmi Note 8T (mobile)          • 25406050              • android-arm64  • Android 11 (API 30)
    • macOS (desktop)                 • macos                 • darwin-arm64   • macOS 15.1.1 24B91 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         • macOS 15.1.1 24B91 darwin-arm64
    • Chrome (web)                    • chrome                • web-javascript • Google Chrome 131.0.6778.108

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Hey @fayax555 we had simular issues with this specific model could try adding an InteractiveViewer with enabling zoom in and zoom out this may solve the issue 'for now' if it does interact .this model may not interact some times with InteractiveViewer

Thanks for the report. I tried on S10+ device but wasn't able to replicate this. Seems specific to the device mentioned. I will keep this issue open and label for team's tracking.

The issue appears to be caused by bad Vulkan drivers on some older GPUs.

In Debug mode, the issue is mostly stable with lighter animations. But if I animate something heavier, such as images, the issue becomes noticeable.
In Release mode, the animations sometimes run fine on the first run after installation. But if the app is reopened, visual glitches consistently occur during animations.

@fayax555

Hey @fayax555 we had simular issues with this specific model could try adding an InteractiveViewer with enabling zoom in and zoom out this may solve the issue 'for now' if it does interact .this model may not interact some times with InteractiveViewer

body: InteractiveViewer(
        child: CustomPaint(
          painter: CirclePainter(_controller),
          child: const SizedBox.expand(),
        ),
      ),

I made the above change, but the issue remains the same.

@fayax555

Hey @fayax555 we had simular issues with this specific model could try adding an InteractiveViewer with enabling zoom in and zoom out this may solve the issue 'for now' if it does interact .this model may not interact some times with InteractiveViewer
body: InteractiveViewer(
        child: CustomPaint(
          painter: CirclePainter(_controller),
          child: const SizedBox.expand(),
        ),
      ),
I made the above change, but the issue remains the same.

Try adding adding a mechanisme to zoom in/out in the InteractiveViewer , and see if it interacts (the zoom works or just freezs)

Try adding adding a mechanisme to zoom in/out in the InteractiveViewer , and see if it interacts (the zoom works or just freezs)

Zoom in/out works without freezing, but the issue still persists.

@fayax555

@fayax555 if you send a PR to add the 610 to the denylist I'll approve it and try to get it cherry picked. Actually probably just disable anything <= 630.

[Impeller] disable all Adrenos older than 630 (flutter-team-archive#5…

impeller_bug.mp4

Observed the same with Nothing Phone 2 (Adreno 730)

[Impeller] disable all Adrenos older than 630 (flutter-team-archive/e…

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.

#161209 will track re-enabling the devices.

Navigation Menu

Repository navigation

[Impeller] Visual glitches during animation on Redmi Note 8T (Adreno 610) #159834

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Impeller] Visual glitches during animation on Redmi Note 8T (Adreno 610) #159834

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

darshankawar commented on Dec 5, 2024

AbdeMohlbi commented on Dec 5, 2024

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

fayax555 commented on Dec 6, 2024

fayax555 commented on Dec 6, 2024

AbdeMohlbi commented on Dec 6, 2024

fayax555 commented on Dec 6, 2024

jonahwilliams commented on Dec 6, 2024

GiriES11 commented on Dec 13, 2024

github-actions commented on Dec 27, 2024

jonahwilliams commented on Jan 7, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions