[impeller] Poor performance with non-symmetrical shadows on older Android devices.

Steps to reproduce

It seems to happen on all the Android devices we've tested on.

Run the example project in profile mode (it defaults to Impeller), check the jank in DevTools' performance frames tab.
You can turn off elevation and notice how jank is minimized.
Turn on elevation again.
Run the project in Skia
Notice the jank is gone.

Seems to be related to a combination of elevation AND borderRadius.

Code sample

https://github.com/larssn/flutter_elevation_jank

Performance profiling on master channel

The issue still persists on the master channel

Timeline Traces

impeller_jank.zip

Video demonstration

If this is required, let me know. There's a loss of about 10fps on the SM-X200 due to jank.

What target platforms are you seeing this bug on?

Android

OS/Browser name and version | Device information

Android 14 - Samsung SM-X200: https://www.bosstab.com/eu/resources/tablet-guides/samsung/specs/tab-a/galaxy-tab-a8-105-2022
Android 11 - Samsung SM-T510: https://www.bosstab.com/eu/resources/tablet-guides/samsung/specs/tab-a/galaxy-tab-a-101-2021
Android 8.1 - Pax A920Pro: https://www.pax.us/wp-content/uploads/2023/12/A920Pro-Datasheet.pdf

Does the problem occur on emulator/simulator as well as on physical devices?

Yes

Is the problem only reproducible with Impeller?

Yes

Logs

Let me know if needed. Only running flutter in profile mode.

Flutter Doctor output

Doctor output

[✓] Flutter (Channel master, 3.29.0-1.0.pre.127, on macOS 15.2 24C101 darwin-arm64, locale en-US) [1,423ms]
    • Flutter version 3.29.0-1.0.pre.127 on channel master at /Users/lars/workspace/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9e273d5e6e (11 hours ago), 2025-01-27 19:43:46 -0800
    • Engine revision 9e273d5e6e
    • Dart version 3.8.0 (build 3.8.0-24.0.dev)
    • DevTools version 2.42.0

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [1,952ms]
    • Android SDK at /Users/lars/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • ANDROID_HOME = /Users/lars/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.2) [1,048ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16C5032a
    • CocoaPods version 1.16.2

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

[✓] Android Studio (version 2024.2) [10ms]
    • 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.96.4) [9ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

[✓] Connected device (4 available) [11.7s]    
    • Pixel 5 (mobile)                  • 0B011FDD4000FR            • android-arm64  • Android 14 (API 34)
    • Another Phone (wireless) (mobile) • 00008110-000404840C7A801E • ios            • iOS 18.2.1 22C161
    • macOS (desktop)                   • macos                     • darwin-arm64   • macOS 15.2 24C101 darwin-arm64
    • Chrome (web)                      • chrome                    • web-javascript • Google Chrome 132.0.6834.111

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

• No issues found!

The performance problem here is that skia has a faster path for non-symmetrical blurs. The difference in performance is closed if you make the material shadow symmetrical. We should investigate if there are more techniques we can use here.

      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(16.0),
        topRight: Radius.circular(16.0),
+        bottomLeft: Radius.circular(16.0),
+        bottomRight: Radius.circular(16.0),
      ),

This looks to be where the decision point is made to have the fast shadow or not:

flutter/engine/src/flutter/impeller/display_list/canvas.cc

Line 737 in c6f2de7

if (radii.AreAllCornersSame()) {

It seems like any easy fix for this problem would be to draw 1/4 of the fast rrect_blur for each of the corners. Unless the corner radius affects the fragments beyond the mid points of the rect, they should all meet up in the same spot.

rrect_blur.frag

int quadrant = GetQuadrant(x, y);
frag_color = DoRRectBlur(corner_radii[quadrant]);

if (radii.AreAllCornersSame()) {
It seems like any easy fix for this problem would be to draw 1/4 of the fast rrect_blur for each of the corners. Unless the corner radius affects the fragments beyond the mid points of the rect, they should all meet up in the same spot.

Corner radii are not restricted to the halves of the rect. You can have a rect that is 100x100 and one corner with a radius of 90.

They are also not required to have a central area that is non-rounded. You could have a 100x100 rect where the top edge has a horizontal radius of 90 on the left and a bottom edge with a horizontal radius of 90 on the right - and similar skew on the left and right edges.

It may be possible to do this, but there are a lot of conditions to check both to know how to slice it up and also how to determine if the width of the figure is larger or smaller than the blur factor when corners can diagonally come together in the middle due to large radii on diagonally opposite corners.

Update...

Oh, perhaps that is what you meant by "affects the fragments beyond the mid points". Yes, that is a stumbling block.

Also I'm not sure there is a good way to update the squircle-based rrect blur for this, but we might be able to handle a subset of "well-behaved non-identical radii" from one of our older algorithms.

@flar

This issue is assigned to @flar but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

@larssn

We recently introduced #178370 which has much better performance for showing a shadow on most convex paths. Does it help the OP? @larssn ?

Not sure, as I'm not involved with that codebase anymore, but I'll let you know if I have any performance issues currently.

@flar

This issue is assigned to @flar but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

@larssn

@larssn any updates?

I dont have access to that codebase anymore, unfortunately, so I can't say. Feel free to close. Can always reopen.

Closing per developer feedback

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.

Navigation Menu

Repository navigation

[impeller] Poor performance with non-symmetrical shadows on older Android devices. #162312

Steps to reproduce

Code sample

Performance profiling on master channel

Timeline Traces

Video demonstration

What target platforms are you seeing this bug on?

OS/Browser name and version | Device information

Does the problem occur on emulator/simulator as well as on physical devices?

Is the problem only reproducible with Impeller?

Logs

Flutter Doctor output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[impeller] Poor performance with non-symmetrical shadows on older Android devices. #162312

Description

Steps to reproduce

Code sample

Performance profiling on master channel

Timeline Traces

Video demonstration

What target platforms are you seeing this bug on?

OS/Browser name and version | Device information

Does the problem occur on emulator/simulator as well as on physical devices?

Is the problem only reproducible with Impeller?

Logs

Flutter Doctor output

Activity

jonahwilliams commented on Jan 28, 2025

jonahwilliams commented on Jan 28, 2025

gaaclarke commented on Sep 2, 2025

flar commented on Sep 2, 2025

flutter-triage-bot commented on Jan 7, 2026

flar commented on Jan 23, 2026

larssn commented on Jan 23, 2026

flutter-triage-bot commented on May 29, 2026

flar commented on May 29, 2026

larssn commented on May 29, 2026

flar commented on May 29, 2026

github-actions commented on Jul 14, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions