Skip to content

[Impeller] : Issue with Flutter 3.27 optimization for BackdropFilter #161262

@mikeesouth

Description

@mikeesouth

Steps to reproduce

This is very similar to #144211.

I can reproduce this by adding a Rive asset (animated vector graphics) and then adding a BackdropFilter on top of that asset. The Rive asset does not have to be animated and the issue occurs only when the Rive asset contains two clipping masks. I'm not sure how the Rive runtime is built but everything worked fine in Flutter 3.22.2 but it no longer works with Flutter 3.27.1 on iOS - and it's only affecting impeller rendering. If I run with "--no-enable-impeller" the rendering works as expected.

I'm not sure if this affects Android yet, I'm having some troubles getting the impeller to work with Android emulators. This issue does not affect Android or web because these platforms does not use Impeller. I have not tried to enable Impeller on Android.

This bug can be tested in this repo: https://github.com/mikeesouth/rive_mask_backdrop_bug

Expected results

I expect that the BackdropFilter optimizations in Flutter 3.27 still works on all scenarios that worked in Flutter 3.24 and 3.22.

This is very similar to #144211. that I reported for Flutter 3.19. The backdrop filter optimizations in Flutter 3.19 prevented the backdrop filter to render over the Rive asset with two clipping masks. This was fixed in a later version and it worked correctly in Flutter 3.22 and 3.24 but now the problem is back in Flutter 3.27 - but this time it's inverted (?). The backdrop filter is now ONLY rendered over the Rive asset with two clipping masks and nowhere else. In Flutter 3.19 it was everywhere except the asset with two clipping masks.

Actual results

Impeller BackdropFilter in Flutter 3.27 only affects Rive assets with two clipping masks if such an asset exists in the scene. This makes all the other widgets look like they are rendered "on top" of the BackdropFilter.

Code sample

Code sample

https://github.com/mikeesouth/rive_mask_backdrop_bug

Screenshots or Video

Screenshots / Video demonstration

Correct results in Flutter 3.22.2:
Correct in Flutter 3_22_2

Incorrect results in Flutter 3.27.1:
Incorrect in Flutter 3_27_1

Logs

Logs

N/A

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.27.1, on macOS 15.1 24B83 darwin-arm64, locale en-US)
    • Flutter version 3.27.1 on channel stable at /Users/mickesoderman/development/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/mickesoderman/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.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

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

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge

[✓] 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.96.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

[✓] Connected device (4 available)
    • iPad (10th generation) (mobile) • 2D0C4D99-BF27-44FA-BC07-263E7B8E97D1 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-18-0 (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 15.1 24B83 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS 15.1 24B83 darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Microsoft Edge 131.0.2903.112

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

• No issues found!

Metadata

Metadata

Labels

P1High-priority issues at the top of the work listc: regressionIt was better in the past than it is nowe: impellerImpeller rendering backend issues and features requestsengineflutter/engine related. See also e: labels.found in release: 3.27Found to occur in 3.27found in release: 3.28Found to occur in 3.28has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-androidAndroid applications specificallyplatform-iosiOS applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions