[web] Canvaskit rendered images with blur filter sometimes do not render. #154303
Description
Steps to reproduce
- Run the sample app using
flutter run -d chrome --web-renderer canvaskit - Resize the browser window.
- Sometimes the blurred image will simply disappear, usually when the window is made larger.
Expected results
Image remains regardless of canvas size.
Actual results
Image disappears intermittently, usually when the browser window is larger.
Code sample
Code sample
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) {
return MaterialApp(
home: Center(
child: Column(
children: <Widget>[
ClipRRect(
borderRadius: const BorderRadius.all(
Radius.circular(30),
),
child: ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: const Image(
image: NetworkImage(
'https://raw.githubusercontent.com/flutter/assets-for-api-docs/main/assets/widgets/falcon.jpg'),
fit: BoxFit.cover,
),
),
),
// This isn't necessary to reproduce the problem, it just shows that
// non-blurred, clipped images do not disappear.
const ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(30),
),
child: Image(
image: NetworkImage(
'https://raw.githubusercontent.com/flutter/assets-for-api-docs/main/assets/widgets/falcon.jpg'),
fit: BoxFit.cover,
),
),
],
),
),
);
}
}
Flutter Doctor output
Doctor output
[✓] Flutter (Channel main, 3.25.0-1.0.pre.162, on Debian GNU/Linux rodete 6.9.10-1rodete4-amd64, locale en_US.UTF-8)
• Flutter version 3.25.0-1.0.pre.162 on channel main at /usr/local/google/home/gspencer/code/flutter
• Upstream repository [email protected]:flutter/flutter.git
• Framework revision 446be11037 (5 hours ago), 2024-08-28 10:20:12 -0700
• Engine revision 8d248aead3
• Dart version 3.6.0 (build 3.6.0-175.0.dev)
• DevTools version 2.39.0-dev.15
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at /usr/local/google/home/gspencer/Android/Sdk
• Platform android-34, build-tools 33.0.1
• ANDROID_HOME = /usr/local/google/home/gspencer/Android/Sdk
• Java binary at: /usr/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.12+7-Debian-1build1)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at google-chrome
[✓] Linux toolchain - develop for Linux desktop
• Debian clang version 16.0.6 (26)
• cmake version 3.29.6
• ninja version 1.12.1
• pkg-config version 1.8.1
[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/to/linux-android-setup for detailed instructions).
[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Debian GNU/Linux rodete 6.9.10-1rodete4-amd64
• Chrome (web) • chrome • web-javascript • Google Chrome 128.0.6613.84
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.