[Impeller] Issue with Flutter 3.19 optimization for BackdropFilter with animation #144211
Description
Steps to reproduce
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.16 but it no longer works with Flutter 3.19 on iOS - and I'm assuming it's related to the Impeller optimizations of BackdropFilter that was introduced in Flutter 3.19.
This issue does not affect Android or web because these platforms does not use Impeller. I have not tried to enable Impeller on Android.
The issue is clearly described in an issue that I filed on the the rive-flutter repo. However, one of the contributors to rive-flutter thought that this is primarily a Flutter problem, not a Rive problem.
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.19 still works on all scenarios that worked in Flutter 3.16.
Actual results
Impeller BackdropFilter in Flutter 3.19 does not affect Rive assets with two clipping masks - making these widgets look like they are rendered "on top" of the BackdropFilter. See rive-app/rive-flutter#360 for more details and screenshots.
Code sample
This bug can be tested in this repo: https://github.com/mikeesouth/rive_mask_backdrop_bug
Code sample
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rive/rive.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter 3.19',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Impeller issue with backdrop filter'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
static const width = 300.0;
static const height = 200.0;
static Artboard? _riveArtboard1;
static Artboard? _riveArtboard2;
@override
void initState() {
super.initState();
_loadArtboard();
}
void _loadArtboard() async {
final riveFileData1 = await rootBundle.load('assets/test1.riv');
final riveFile1 = RiveFile.import(riveFileData1);
final riveFileData2 = await rootBundle.load('assets/test2.riv');
final riveFile2 = RiveFile.import(riveFileData2);
setState(() {
_riveArtboard1 = riveFile1.artboardByName('test');
_riveArtboard2 = riveFile2.artboardByName('test');
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Stack(
alignment: Alignment.center,
children: [
Positioned(
top: 0,
child: Row(
children: [
const SizedBox(
width: width,
height: height,
child: RiveAnimation.network(
'https://cdn.rive.app/animations/vehicles.riv',
),
),
SizedBox(
width: width,
height: height,
child: _riveArtboard1 != null
? Rive(artboard: _riveArtboard1!)
: Container(color: Colors.orange),
),
SizedBox(
width: width,
height: height,
child: _riveArtboard2 != null
? Rive(artboard: _riveArtboard2!)
: Container(color: Colors.orange),
),
],
),
),
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
child: Container(
width: double.infinity,
height: double.infinity,
color: Colors.black.withOpacity(0.5),
alignment: Alignment.center,
child: Container(
margin: const EdgeInsets.only(top: 100),
width: 800,
height: 400,
color: Colors.white,
padding: const EdgeInsets.all(15),
child: const Text(
'''The three rive assets above should be blurred and dimmed by the backdrop filter.
- The left one (the bus) works correctly.
- The middle one (test1.riv) contains one clipping shape and it also works correct.
- The right one (test2.riv) contains two clipping shapes and it is not blurred or dimmed in Impeller on iOS, it works on Android, web and non-impeller on iOS. It also worked before the backdrop filter optimizations in Flutter 3.19 (so it works in 3.16.X)''',
style: TextStyle(fontSize: 20),
),
),
),
),
],
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
Logs
Logs
N/A
Flutter Doctor output
Doctor output
[√] Flutter (Channel stable, 3.19.1, on Microsoft Windows [Version 10.0.22631.3155], locale sv-SE)
• Flutter version 3.19.1 on channel stable at C:\Stuff\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision abb292a07e (6 days ago), 2024-02-20 14:35:05 -0800
• Engine revision 04817c99c9
• Dart version 3.3.0
• DevTools version 2.31.1
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at C:\Users\micke\AppData\Local\Android\sdk
• Platform android-34, build-tools 34.0.0
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
• All Android licenses accepted.
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[√] Visual Studio - develop Windows apps (Visual Studio Professional 2022 17.6.3)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Professional
• Visual Studio Professional 2022 version 17.6.33801.468
• Windows 10 SDK version 10.0.22000.0
[√] Android Studio (version 2022.3)
• Android Studio at C:\Program Files\Android\Android Studio
• 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.6+0-b2043.56-10027231)
[√] VS Code (version 1.86.2)
• VS Code at C:\Users\micke\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.82.0
[√] Connected device (2 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22631.3155]
• Edge (web) • edge • web-javascript • Microsoft Edge 121.0.2277.112
[√] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.Metadata
Metadata
Labels
High-priority issues at the top of the work listIt was better in the past than it is nowUI glitches reported at the engine/skia or impeller rendering levelImpeller rendering backend issues and features requestsflutter/engine related. See also e: labels.Found to occur in 3.19Found to occur in 3.20The issue has been confirmed reproducible and is ready to work onOwned by Engine teamTriaged by Engine team