Rendering error with opacity when using Impeller on iOS

[Cteq3132]

Description

Hello! I have a problem with some opacity that doesn't render well on iOS when using Impeller for the main Rive animation of my app. See the following images for example (left is when using Impeller, right is when Impeller is disabled):

Steps To Reproduce

Steps to reproduce the behavior:

1. Create an empty Flutter application
2. Add Rive dependency to the pubspec

flutter:
  assets:
    - assets/animation.riv

4. Add the provided Rive asset to the repo in assets/animation.riv
5. Replace main.dart with the following code:

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: RiveAnimation.asset(
            'assets/animation.riv',
            artboard: 'New Artboard',
          ),
        ),
      ),
    );
  }
}

6. See error ⚠️

---

8. Disable Impeller in the info.plist file:

<key>FLTEnableImpeller</key>
	<false/>

9. See the correct rendering ✅

Source .riv/.rev file

animation.riv.zip

Expected behavior

I expect the rendering to be the same with or without using Impeller.

Device & Versions

• Device: iOS Simulator, iOS Devices
• OS: Tested on iOS 17.2, but impacts all iOS versions supported by Rive
• Flutter Version: 3.16.9 e.g.:

Flutter 3.16.9 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 41456452f2 (10 weeks ago) • 2024-01-25 10:06:23 -0800
Engine • revision f40e976bed
Tools • Dart 3.2.6 • DevTools 2.28.5

Additional context

When we detected the issue, we were able to fix it originally by using Paint.enableDithering = false; in the bootstrap of our app, but this has been deprecated and removed in the last Flutter version (>3.19.x).

Thanks for your help!

[Riyan-M]

Adding to this - I am observing strange geometric patterns (similar to the example shown by OP) when Radial Gradients are used for shape layers too. I don't remember this being an issue in earlier versions of rive (around 0.11.11)

[Cteq3132]

Hello @HayesGordon, have you had the chance to look at this issue? It's a blocker for us with the migration to flutter 3.19.x since the Paint.enableDithering flag was removed.

[HayesGordon]

Hi all, if this is only reproducing when using Impeller (and not Skia) then this is a bug that should be reported to Flutter (https://github.com/flutter/flutter/issues). It seems like this should be easily reproducible for them and will hopefully receive attention quickly. Before filling the issue, I'd recommend testing if this is still an issue with the latest development version of Flutter.

If you're seeing inconsistencies between the editor and the Flutter runtime, could you please provide additional detail + samples.

[Cteq3132]

Hi! Thanks for your feedback @HayesGordon, I just opened an issue in the Flutter repo: https://github.com/flutter/flutter/issues/146975

[HayesGordon]

This issue has been reported as fixed since Flutter 3.22 beta. Closing this issue, but please reopen it if you encounter difficulties or note other differences between Skia/Impeller