Skip to content

Codec.getNextFrame().image creates artifacts in semi-transparent pixels #170089

Closed
@WeirdHat

Description

@WeirdHat

Steps to reproduce

In my sample I'm setting pixel values manually, but this also happens if decoding from a PNG file.

It looks like some kind of rounding error?

Not sure what the relevant difference is between these two iPads. Could it be something to do with the "Ultra Retina XDR display" on the iPad Pro?

Expected results

Correct gradient, on iPad Air M1 MME23LL/A:
Image

Actual results

Ugly banding, on iPad Pro M4 MVX23LL/A:
Image

Code sample

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});
  
  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  ui.Image? image;

  @override
  void initState() {
    super.initState();

    makeImage();
  }

  Future makeImage() async {
    var size = 40;
    var gradientWidth = 20;

    var pixels = Uint8List(size * size * 4);

    for (var x = 0; x < gradientWidth; x++) {
      for (var y = 0; y < size; y++) {
        double alpha = x / gradientWidth;
        pixels[(size * y + x) * 4 + 0] = (232 * alpha).round();
        pixels[(size * y + x) * 4 + 1] = (124 * alpha).round();
        pixels[(size * y + x) * 4 + 2] = (42 * alpha).round();
        pixels[(size * y + x) * 4 + 3] = (alpha * 255).round();
      }
    }

    for (var x = gradientWidth; x < size; x++) {
      for (var y = 0; y < size; y++) {
        pixels[(size * y + x) * 4 + 0] = 232;
        pixels[(size * y + x) * 4 + 1] = 124;
        pixels[(size * y + x) * 4 + 2] = 42;
        pixels[(size * y + x) * 4 + 3] = 255;
      }
    }

    ui.ImmutableBuffer buffer = await ui.ImmutableBuffer.fromUint8List(pixels);
    ui.ImageDescriptor descriptor = ui.ImageDescriptor.raw(buffer, width: size, height: size, pixelFormat: ui.PixelFormat.rgba8888);
    ui.Codec codec = await descriptor.instantiateCodec(targetWidth: size, targetHeight: size);
    ui.FrameInfo frameInfo = await codec.getNextFrame();
    image = frameInfo.image;

    setState((){});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home:
      Container(color: Color(0xffffffff), child:
        Center(child:
          RawImage(filterQuality: FilterQuality.none, width: 500, height: 500, fit: BoxFit.fill, image: image)
        )
      )
    );
  }
}

Screenshots or Video

Logs

No response

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.32.2, on macOS 15.4 24E248 darwin-arm64, locale en-US) [375ms]
    • Flutter version 3.32.2 on channel stable at /Users/weirdhat/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 8defaa71a7 (26 hours ago), 2025-06-04 11:02:51 -0700
    • Engine revision 1091508939
    • Dart version 3.8.1
    • DevTools version 2.45.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [1,184ms]
    • Android SDK at /Users/weirdhat/Library/Android/sdk
    • Platform android-35, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.2) [776ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16C5032a
    • CocoaPods version 1.16.2

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

[✓] Android Studio (version 2024.1) [11ms]
    • 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.11+0-17.0.11b1207.24-11852314)

[✓] VS Code (version 1.99.3) [10ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.112.0

[✓] Connected device (5 available) [6.2s]
    • JK iPad 2024 (wireless) (mobile)     • 00008103-001659302668801E                • ios            • iOS 18.4 22E240
    • Wendy’s iPad (mobile)                • 00008132-001E30DA22B9001C                • ios            • iOS 18.3.2 22D82
    • JACOB’s iPad (2) (wireless) (mobile) • 1b7384fb4c7a0d33045b6a8bafac34a1b0c5da58 • ios            • iOS 17.2 21C62
    • macOS (desktop)                      • macos                                    • darwin-arm64   • macOS 15.4 24E248 darwin-arm64
    • Chrome (web)                         • chrome                                   • web-javascript • Google Chrome 137.0.7151.56

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

• No issues found!

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: imagesLoading, displaying, rendering imagesc: renderingUI glitches reported at the engine/skia or impeller rendering levele: device-specificOnly manifests on certain devicesengineflutter/engine repository. See also e: labels.found in release: 3.32Found to occur in 3.32found in release: 3.33Found to occur in 3.33fyi-iosFor the attention of iOS platform teamhas 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

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions