When there are multiple BackDropFilters, Impeller performs worse than Skia. #149989
Description
Steps to reproduce
1.Execute the test code in profile mode with both Impeller and Skia.
2.This issue occurs when swiping up and down on the screen to scroll through the list. The frame rate of the video decreases.
Here is the URL of the GitHub repository containing the test code.
https://github.com/HarukaOki/impeller_test
Code sample
Code sample
dart
import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';
final _random = Random();
void main() => runApp(const BackdropFilterDemo());
class BackdropFilterDemo extends StatelessWidget {
const BackdropFilterDemo({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
body: Stack(
children: [
ListView.builder(
itemCount: 120, // 60 pairs of red and blue containers
itemBuilder: (context, index) {
return Container(
height: 100,
color: index % 2 == 0 ? Colors.red : Colors.blue,
);
},
),
Center(
child: Container(
width: 400,
height: 400,
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
),
child: Image.network('https://picsum.photos/400'),
),
),
ListView.separated(
separatorBuilder: (_, __) => const SizedBox(height: 8),
itemBuilder: (context, index) => BlurEffect(
child: SizedBox(
height: 50,
child: Center(
child: Text(index.toString(),
style: const TextStyle(color: Colors.white)),
),
),
),
itemCount: 200,
),
Positioned.fill(
bottom: null,
child: BlurEffect(
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).viewPadding.top,
),
child: const SizedBox(height: 45),
),
),
),
Positioned.fill(
top: null,
child: BlurEffect(
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).viewPadding.bottom,
),
child: const SizedBox(height: 50),
),
),
),
],
),
),
);
}
}
class BlurEffect extends StatelessWidget {
final Widget child;
const BlurEffect({
required this.child,
super.key,
});
@override
Widget build(BuildContext context) {
return ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 40,
sigmaY: 40,
// tileMode: TileMode.mirror,
),
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.black.withOpacity(.65)),
child: child,
),
),
);
}
}
Performance profiling on master channel
- The issue still persists on the master channel
Timeline Traces
Timeline Traces JSON
[dart_devtools_2024-06-10_17_19_32.604.json.zip](https://github.com/user-attachments/files/15759700/dart_devtools_2024-06-10_17_19_32.604.json.zip)
Video demonstration
Video demonstration
(impeller)RPReplay_Final1718005260.MP4
(skia)
RPReplay_Final1718005405.MP4
What target platforms are you seeing this bug on?
iOS
OS/Browser name and version | Device information
Target OS version/browser: 16.1.2
Devices: iPhone X
Does the problem occur on emulator/simulator as well as on physical devices?
Unknown
Is the problem only reproducible with Impeller?
Yes
Logs
Logs
[log.txt.zip](https://github.com/user-attachments/files/15759703/log.txt.zip)
Flutter Doctor output
Doctor output
console
harukaoki@MacBook-Pro-147 test_app % flutter doctor -v
[✓] Flutter (Channel master, 3.23.0-13.0.pre.168, on macOS 14.3 23D56 darwin-arm64, locale ja-JP)
• Flutter version 3.23.0-13.0.pre.168 on channel master at /Users/harukaoki/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 32081aab69 (2 days ago), 2024-06-08 10:35:21 -0700
• Engine revision 1cdbebee19
• Dart version 3.5.0 (build 3.5.0-236.0.dev)
• DevTools version 2.36.0
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at /Users/harukaoki/Library/Android/sdk
• Platform android-34, build-tools 33.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15F31d
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840)
[✓] VS Code (version 1.83.1)
• VS Code at /Users/harukaoki/Desktop/Visual Studio Code.app/Contents
• Flutter extension version 3.90.0
[✓] Connected device (5 available)
• iPhone (2) (mobile) • 4ea2bc0bd4b563471b21892e371a3b307a3bb363 • ios • iOS 16.1.2 20B110
• iPhone (8) (mobile) • 00008020-001124CE3CE9002E • ios • iOS 17.5.1 21F90
• macOS (desktop) • macos • darwin-arm64 • macOS 14.3 23D56 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.3 23D56 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 125.0.6422.142
[✓] Network resources
• All expected network resources are available.
• No issues found!