Skip to content

[Impeller] color issues with BlendMode.screen. #141160

@zhxst

Description

@zhxst

Steps to reproduce

  1. Issue A
  • Run the code below with iOS/Impeller.
  • Check the screen.
  1. Issue B
  • comment the line about color, and uncomment the line about shader.
  • Run the code and check the screen again.

Note:

  • The major issue is the green color doesn't apply on the layer.
  • And there is a regression for Issue B from 3.13 to 3.16.
  • Tested on Flutter 3.16.5 and master version.

Expected results

A green blurred circle on screen.

Actual results

Issue A on iOS/Impeller:
A black blurred circle on screen.
Issue B on iOS/Impeller with 3.16.5:
White screen with nothing.
Issue B on iOS/Impeller with 3.13.9:
A black blurred circle on screen.

Code sample

Code sample
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Align(
          alignment: Alignment.center,
          child: CustomPaint(
            size: Size.infinite,
            painter: BubbleLayerPainter(),
          ),
        ),
      ),
    );
  }
}

class BubbleLayerPainter extends CustomPainter {
  const BubbleLayerPainter();
  @override
  void paint(Canvas canvas, Size size) {
    final colorBlur = Paint()
      ..style = PaintingStyle.fill
      ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 10)
      ..color = Colors.black;

    final center = size.center(Offset.zero);
    canvas.drawCircle(center, 128, colorBlur);
    final surface = Paint()
      ..blendMode = BlendMode.screen
      ..color = Colors.green;                  // <<-- issue here
    // ..shader = ui.Gradient.linear(
    //     Offset.zero, Offset(0, size.height), [Colors.green, Colors.green]);
    canvas.drawPaint(surface);
  }

  @override
  bool shouldRepaint(BubbleLayerPainter oldDelegate) {
    return true;
  }
}

Screenshots or Video

Screenshots Issue A:

Output on Android

Issue A on iOS/Impeller

Issue B:

Output on Android

Issue B on iOS/Impeller with 3.16.5

Issue B on iOS/Impeller with 3.13.9

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.16.5, on macOS 13.6 22G120 darwin-arm64, locale zh-Hans-CN)
    • Flutter version 3.16.5 on channel stable at /Users/[user]/fvm/versions/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 78666c8dc5 (3 weeks ago), 2023-12-19 16:14:14 -0800
    • Engine revision 3f3e560236
    • Dart version 3.2.3
    • DevTools version 2.28.4
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/zhx/Library/Android/sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.1)
    • Xcode at /Applications/Xcode_15.1.app/Contents/Developer
    • Build 15C65
    • CocoaPods version 1.14.2

[✓] Android Studio (version 2023.1)
    • 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.7+0-17.0.7b1000.6-10550314)

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

[✓] Connected device (2 available)
    • iPhone (mobile)    • 00000000-0000000000000000 • ios          • iOS 16.5.1 20F75
    • macOS (desktop) • macos                     • darwin-arm64 • macOS 13.6 22G120 darwin-arm64

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

• No issues found!```

</details>

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work liste: impellerImpeller rendering backend issues and features requestsengineflutter/engine related. See also e: labels.found in release: 3.16Found to occur in 3.16found in release: 3.18Found to occur in 3.18has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions