Rendering issue with BackdropFilter (using ImageFilter.blur) #165422
Description
Steps to reproduce
- Run the code sample as-is in iPhone 16 simulator running 18.2 (or likely any other iOS simulator), Pixel 3a simulator, macOS 15.2 or Chrome 132.0.6834.160.
- Observe that blurring has taken place as an overlay to the three Text() children
Expected results
- All blurring is expected to be identical across each platform
- No artifacts (defects in the blurring) are expected
Actual results
- Blurring is NOT identical across the platforms
- iOS and Android in particular contain blurring artifacts
- This appears to be heavily influenced by the font sizes (some render better than others)
- Font size of 50 and 100 in particular render the worst in these environments.
- Visible dark lines appear with the blur sigma of 10 (increasing or decreasing this number has varying results)
- macOS and Chrome render perfectly at any sigma
NOTE: This is particularly bothersome if I introduce an AnimationBuilder (adjusting the sigma over time). The animation will appear "chunky" on iOS and Android as compared to Chrome and macOS renders.
Code sample
Code sample
flutter bug project: bug.zip
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
var sigma = 10.0;
return MaterialApp(
title: 'Flutter Demo',
home: Stack(
//fit: StackFit.expand,
children: [
Container(
alignment: Alignment.center,
color: Colors.black,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'12345',
style: TextStyle(color: Colors.white, fontSize: 50, fontWeight: FontWeight.w300),
),
Text(
'12345',
style: TextStyle(color: Colors.white, fontSize: 100, fontWeight: FontWeight.w300),
),
Text(
'12345',
style: TextStyle(color: Colors.white, fontSize: 150, fontWeight: FontWeight.w300),
),
],
),
),
BackdropFilter(
filter: ImageFilter.blur(sigmaX: sigma, sigmaY: sigma),
child: Container()
),
],
),
);
}
}
Screenshots or Video
Screenshots (5 total)
(bad render) iPhone 15 Pro (physical)
(bad render) iPhone 16 (simulator)
(bad render) Pixel 3A (simulator)
(good render) Chrome
(good render) macOS
Logs
Logs
No logs once application startedFlutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.29.2, on macOS 15.2 24C101 darwin-arm64, locale en-US) [1,328ms]
• Flutter version 3.29.2 on channel stable at /Users/greg/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision c236373904 (5 days ago), 2025-03-13 16:17:06 -0400
• Engine revision 18b71d647a
• Dart version 3.7.2
• DevTools version 2.42.3
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [1,942ms]
• Android SDK at /Users/greg/Library/Android/sdk
• Platform android-35, build-tools 34.0.0
• ANDROID_HOME = /Users/greg/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 17.0.9+0-17.0.9b1087.7-11185874)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 16.2) [1,230ms]
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16C5032a
• CocoaPods version 1.16.2
[✓] Chrome - develop for the web [12ms]
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2023.2) [12ms]
• 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.9+0-17.0.9b1087.7-11185874)
[✓] VS Code (version 1.98.0) [10ms]
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.106.0
[✓] Connected device (6 available) [6.4s]
• sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 14 (API 34) (emulator)
• Greg’s iPhone 15 (wireless) (mobile) • 00008130-001479063E10001C • ios • iOS 18.3.2 22D82
• iPhone 16 (mobile) • 766956AF-89D9-4E51-8F35-AADE1B2ADF87 • 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 134.0.6998.89
! Error: Browsing on the local area network for iPhone 11 (test). 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 [181ms]
• All expected network resources are available.
• No issues found!