Issue with Flutter 3.19 iOS impeller optimization for BackdropFilter

[mikeesouth]

Description

Flutter 3.19 introduced new optimizations for BackdropFilter when using Impeller (currently only on iOS). This new optimization does not work correctly for Rive assets with two (or more) clipping masks that affect the same element. This is the result of my detective work but I assume that there is a better and more logical explanation to why this happens :) I have this issue with one of my main Rive assets so that's why I started to debug and found that removing the secondary clipping mask solved the issue.

Ok, so a BackdropFilter can blur the background and maybe also dim the backgrounds content with 50% opacity black color or so. It's commonly used with modals. When having a Rive asset in the background, the expected result is for that Rive asset to also blurred and dimmed - even if it's animated. This works correctly in Flutter 3.16 for all files that I've tested. In Flutter 3.19, it works for all files except if the Rive artboard contains two (or more) clipping masks - then that Rive asset is displayed without blur and without dim from the backdrop color - it is just as if the Rive animation was drawn on top of the BackdropFilter instead of under it. I also tested with Flutter 3.19.1 and it has the same issue.

Steps To Reproduce

Here is a repo that reproduces the error: https://github.com/mikeesouth/rive_mask_backdrop_bug

Steps to reproduce the behavior:

1. Create a Rive asset with three shapes, e.g. square, star, star
2. Select the square and add the stars as clipping masks (two masks)
3. Export the file, load it into Flutter 3.19
4. Add a BackdropFilter on top of the Rive asset
5. See error ⚠️: The backdrop filter does not affect the Rive asset

Source .riv/.rev file

I've attached two files:

• test1.riv only has one clipping mask and it works
• test2.rive has two clipping masks and it does not work correctly with the BackdropFilter in Flutter 3.19 rive-test-files.zip

Expected behavior

I expect the Rive asset to be blurred and dimmed by the BackDropfilter, even if the file contains two or more clipping masks.

Screenshots

First a screenshot of how it looks, note that the third image in the top isn't blurred or dimmed.

Here is a very simple screenshot from the Rive editor describing how I created the second mask. The issue occurs if the masks is set on the same entity or in nested entities (in this screenshot, the second mask is created deeper in the structure than the first mask).

Device & Versions (please complete the following information)

• Device: iOS Simulator, iPad physical device
• OS: iOS 17
• Flutter Version:

Flutter 3.19.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision abb292a07e (5 days ago) • 2024-02-20 14:35:05 -0800
Engine • revision 04817c99c9
Tools • Dart 3.3.0 • DevTools 2.31.1

Additional context

I'm not sure if this is a problem with rive-flutter or with the new optimization in Flutter 3.19. Maybe I should post this issue on the flutter github too? I haven't looked too much into the details of these optimizations but I guess that https://github.com/flutter/engine/pull/47808 and https://github.com/flutter/engine/pull/47397 are related.

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

[HayesGordon]

Hi @mikeesouth, thanks for the detailed report!

This does seem like a Flutter/Impeller issue and will need to be reported to the Flutter team. Especially if it used to work on 3.16

Would you be willing to make a new issue on the Flutter repo, and link to this one?

[mikeesouth]

@HayesGordon thanks! I created an issue: https://github.com/flutter/flutter/issues/144211

[HayesGordon]

Great! I see they have already been able to repro

edit: spelling

[orestesgaolin]

The Flutter issue has been closed, and 3.19.4 seems to include this fix. Can you verify it works again as expected?