[iOS][Impeller] AnimatedOpacity affects blended color overlay render #139571

TatsuUkraine · 2023-12-05T16:34:43Z

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Steps to reproduce

Create opacity animation for a widget
overlay it with layers that have color filters
run opacity animation

Expected results

animated widget changes without affecting overlay

Actual results

widget rebuild affects overlay with blended color

Overall this is a very simple case with the error, in real life, it causes much bigger problems when it comes to render elements

Code sample

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                AnimatedSwitcher(
                  duration: const Duration(seconds: 2),
                  child: Text('Animated container: $_counter', key: Key(_counter.toString()),),
                ),
              ],
            ),
          ),
          Positioned.fill(
            child: Stack(
              children: [
                Positioned.fill(
                  child: Stack(
                    children: [
                      ColorFiltered(
                        colorFilter: ColorFilter.mode(
                          Colors.black54,
                          BlendMode.srcOut,
                        ),
                        child: Stack(
                          children: [
                            Positioned.fill(
                              child: Container(
                                decoration: const BoxDecoration(
                                  color: Colors.white,
                                  backgroundBlendMode: BlendMode.dstOut,
                                ),
                              ),
                            ),
                            Positioned(
                              top: 200,
                              left: 50,
                              child: DecoratedBox(
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                ),
                                child: SizedBox.square(dimension: 100),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

iOS with Impeller

Simulator.Screen.Recording.-.iPhone.15.-.2023-12-05.at.18.33.10.mp4

iOS without Impeller

Simulator.Screen.Recording.-.iPhone.15.-.2023-12-05.at.18.32.24.mp4

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.16.2, on macOS 13.5.2 22G91 darwin-arm64, locale ru)
    • Flutter version 3.16.2 on channel stable at /Users/tatsu/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9e1c857886 (5 days ago), 2023-11-30 11:51:18 -0600
    • Engine revision cf7a9d0800
    • Dart version 3.2.2
    • DevTools version 2.28.3

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at 
    • Platform android-34, build-tools 33.0.0
    • ANDROID_HOME = 
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15A507
    • CocoaPods version 1.13.0

[✓] Android Studio (version 2022.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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-17.0.6b829.9-10027231)

[✓] Connected device (4 available)

[✓] Network resources
    • All expected network resources are available.

• No issues found!

TatsuUkraine · 2023-12-05T18:20:20Z

this sample was working fine in 3.13 stable release

darshankawar · 2023-12-06T07:16:59Z

Thanks for the report. Replicable using latest master and stable versions.

139571.mov

stable, master flutter doctor -v

[!] Flutter (Channel stable, 3.16.0, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 3.16.0 on channel stable at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision db7ef5bf9f (12 days ago), 2023-11-15 11:25:44 -0800
    • Engine revision 74d16627b9
    • Dart version 3.2.0
    • DevTools version 2.28.2
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.18.0-5.0.pre.17, on macOS 12.2.1 21D62
    darwin-x64, locale en-GB)
    • Flutter version 3.18.0-5.0.pre.17 on channel master at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a0f4265575 (2 hours ago), 2023-12-05 21:28:40 -0500
    • Engine revision fe96317750
    • Dart version 3.3.0 (build 3.3.0-194.0.dev)
    • DevTools version 2.30.0
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/dhs/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 65.1.4
    • Dart plugin version 213.7228

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.29.0

[✓] Connected device (3 available)
    • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios
      • iOS 15.3.1 19D52
    • macOS (desktop)           • macos                                    •
      darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)              • chrome                                   •
      web-javascript • Google Chrome 109.0.5414.119

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
      
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

TatsuUkraine · 2023-12-08T23:23:08Z

I there any news regarding this issue? We currently blocked with flutter upgrade because of this issue( we have some elements flickering here and there across the app(

TatsuUkraine · 2023-12-08T23:26:23Z

Just trying to understand if it's something that may be fixed in near future or we will need to wait till next stable release, or maybe even turn off impeller (

jason-simmons · 2023-12-12T04:15:58Z

You can work around this issue by disabling partial repaint in Impeller. To do that, set FLTDisablePartialRepaint to true in the app's Info.plist.

I also noticed that the issue does not appear if you patch Canvas::SaveLayer to reinstate the ClipRect operation that was removed in flutter/engine@410838b

  if (bounds.has_value() && !backdrop_filter) {
    ClipGeometry(Geometry::MakeRect(bounds.value()), Entity::ClipOperation::kIntersect);
    IntersectCulling(bounds.value());
  }

@jonahwilliams @bdero

jonahwilliams · 2023-12-12T17:03:43Z

Is the optimization in the linked commit misfiring because partial repaint adds a translation to the canvas?

TatsuUkraine · 2023-12-12T20:40:27Z

You can work around this issue by disabling partial repaint in Impeller.

@jason-simmons do you know how bad it will impact performance? At least rawly

TatsuUkraine · 2023-12-12T20:43:10Z

Just a guess maybe) I'm curious if I need to spend time on benchmark at all if it's going to be very bad 😅

jonahwilliams · 2023-12-14T00:33:56Z

I will look into fixing this one.

jonahwilliams · 2023-12-14T04:56:18Z

The behavior is different on ToT, instead the text is flashing black. Upon investigation the surface has NaNs, and disabling the clear color optimization causes it to render correctly. This might be similar to previous clear color optimization bugs.

jonahwilliams · 2023-12-14T17:04:39Z

I have a fix. If I can confirm that this is fixable on stable by turning off entity culling then we can put together a cherry pick

jonahwilliams · 2023-12-14T17:59:28Z

The problem is that the logic to force pass creation isn't general enough: https://github.com/flutter/engine/blob/main/impeller/entity/entity_pass.cc#L848-L853

This uses a transparent color as a signal that we don't need to force create the pass, but its entirely valid to clear to transparent black and then create UI which feeds that texture elsewhere, as the following test demonstrates. You should

TEST_P(AiksTest, SubpassWithClearColorOptimization) {
  Canvas canvas;

  // Use a non-srcOver blend mode to ensure that we don't detect this as an
  // opacity peephole optimization.
  canvas.SaveLayer(
      {.color = Color::Blue().WithAlpha(0.5), .blend_mode = BlendMode::kSource},
      Rect::MakeLTRB(0, 0, 200, 200));
  canvas.DrawPaint(
      {.color = Color::BlackTransparent(), .blend_mode = BlendMode::kSource});
  canvas.Restore();

  canvas.SaveLayer(
      {.color = Color::Blue(), .blend_mode = BlendMode::kDestinationOver});
  canvas.Restore();

  ASSERT_TRUE(OpenPlaygroundHere(canvas.EndRecordingAsPicture()));
}

As a fix I would propose that

…lear color. (#49038) If we clear to transparent black, we're not forcing the pass to be constructed. Change the entity pass API so that we can tell the difference between clearing transparent black and not having a clear color. In flutter/flutter#139571 , the app is creating a layer that is clearing to a transparent color, which is getting skipped. That invalid texture is fed into a blend which produces either black or magenta error texture. Fixes flutter/flutter#139571

…lear color. (flutter#49038) If we clear to transparent black, we're not forcing the pass to be constructed. Change the entity pass API so that we can tell the difference between clearing transparent black and not having a clear color. In flutter/flutter#139571 , the app is creating a layer that is clearing to a transparent color, which is getting skipped. That invalid texture is fed into a blend which produces either black or magenta error texture. Fixes flutter/flutter#139571

…9190) This PR cherry-picks the following two commits: 2dbc5d2 0b0fab8 to address flutter/flutter#139571

github-actions · 2023-12-29T06:00:43Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

TatsuUkraine changed the title ~~[iOS][Impeller] AnimatedOpacity causing artifacts during the render with blended color overlay~~ [iOS][Impeller] AnimatedOpacity affects blended color overlay render Dec 5, 2023

darshankawar added the in triage Presently being triaged by the triage team label Dec 6, 2023

jonahwilliams assigned jason-simmons Dec 11, 2023

jonahwilliams added P1 High-priority issues at the top of the work list triaged-engine Triaged by Engine team labels Dec 11, 2023

jonahwilliams mentioned this issue Dec 11, 2023

[Impeller] saveLayer with BlendMode.dstATop looks differently with Impeller compared to Skia (3.16.1) #139238

Closed

2 tasks

jonahwilliams assigned jonahwilliams and unassigned jason-simmons Dec 14, 2023

jonahwilliams mentioned this issue Dec 14, 2023

[Impeller] distinguish between no clear color and transparent black clear color. flutter/engine#49038

Merged

auto-submit bot closed this as completed in flutter/engine#49038 Dec 14, 2023

darshankawar added the r: fixed Issue is closed as already fixed in a newer version label Dec 15, 2023

This was referenced Dec 18, 2023

[CP] Fix for AnimatedOpacity affects blended color overlay render flutter/engine#49190

Merged

[CP] Fix for AnimatedOpacity affects blended color overlay render #140337

Closed

auto-submit bot pushed a commit to flutter/engine that referenced this issue Dec 18, 2023

[CP] Fix for AnimatedOpacity affects blended color overlay render (#4…

61b3360

…9190) This PR cherry-picks the following two commits: 2dbc5d2 0b0fab8 to address flutter/flutter#139571

github-actions bot locked as resolved and limited conversation to collaborators Dec 29, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[iOS][Impeller] AnimatedOpacity affects blended color overlay render #139571

[iOS][Impeller] AnimatedOpacity affects blended color overlay render #139571

TatsuUkraine commented Dec 5, 2023

TatsuUkraine commented Dec 5, 2023

darshankawar commented Dec 6, 2023

TatsuUkraine commented Dec 8, 2023

TatsuUkraine commented Dec 8, 2023

jason-simmons commented Dec 12, 2023

jonahwilliams commented Dec 12, 2023

TatsuUkraine commented Dec 12, 2023

TatsuUkraine commented Dec 12, 2023

jonahwilliams commented Dec 14, 2023

jonahwilliams commented Dec 14, 2023

jonahwilliams commented Dec 14, 2023

jonahwilliams commented Dec 14, 2023

github-actions bot commented Dec 29, 2023

[iOS][Impeller] AnimatedOpacity affects blended color overlay render #139571

[iOS][Impeller] AnimatedOpacity affects blended color overlay render #139571

Comments

TatsuUkraine commented Dec 5, 2023

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

TatsuUkraine commented Dec 5, 2023

darshankawar commented Dec 6, 2023

TatsuUkraine commented Dec 8, 2023

TatsuUkraine commented Dec 8, 2023

jason-simmons commented Dec 12, 2023

jonahwilliams commented Dec 12, 2023

TatsuUkraine commented Dec 12, 2023

TatsuUkraine commented Dec 12, 2023

jonahwilliams commented Dec 14, 2023

jonahwilliams commented Dec 14, 2023

jonahwilliams commented Dec 14, 2023

jonahwilliams commented Dec 14, 2023

github-actions bot commented Dec 29, 2023