search

rive-app / rive-flutter

Flutter runtime for Rive
https://rive.app
MIT License
1.16k stars 180 forks source link

Issue with Flutter 3.19 iOS impeller optimization for BackdropFilter #360

Closed mikeesouth closed 1 month ago

mikeesouth commented 4 months ago

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:

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. Rive-BackdropFilter-blur_issue

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). rive_mask_config

Device & Versions (please complete the following information)

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 commented 4 months ago

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 commented 4 months ago

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

HayesGordon commented 4 months ago

Great! I see they have already been able to repro

edit: spelling

orestesgaolin commented 1 month ago

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

mikeesouth commented 1 month ago

Sorry for the late response but yes - this works as expected now in 3.22.1 (latest stable). I didn't have time to test in 3.19.4 but I assume that it works there too. Thanks for handling this swiftly!