flutter / flutter/flutter

[web] ImageFiltered rendering differ on web

Open
#154,338 1 comment 1 reaction 0 assignees View on GitHub
a: images e: web_canvaskit engine found in release: 3.24 found in release: 3.25 has reproducible steps P2 platform-web team-web triaged-web
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

Run below code on web and Android or iOS.

### Expected results

Rendering should be similar.

### Actual results

Web rendering is significantly more pale.

### Code sample

Color filter:

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

const ColorFilter grayScaleFilter = ColorFilter.matrix([
0.2126,
0.7152,
0.0722,
0,
0,
0.2126,
0.7152,
0.0722,
0,
0,
0.2126,
0.7152,
0.0722,
0,
0,
0,
0,
0,
0.25,
0,
]);

```

Usage:

```dart
ImageFiltered(
imageFilter: grayScaleFilter,
child: Image(...),
);
```

### Screenshots or Video

![Screenshot_20240829-125632](https://github.com/user-attachments/assets/4b4e2338-476a-48fb-9e5a-e294b3d1b753)
![Screenshot from 2024-08-29 13-23-59](https://github.com/user-attachments/assets/9c881008-b283-44fc-a906-49f93c1df3d6)

### Logs

Logs

```console
[Paste your logs here]
```

### Flutter Doctor output

Doctor output

```console[✓] Flutter (Channel stable, 3.24.1, on Ubuntu 24.04 LTS 6.8.0-105041-tuxedo, locale en_US.UTF-8)
• Flutter version 3.24.1 on channel stable at /home/geoffrey/snap/flutter/common/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 5874a72aa4 (9 days ago), 2024-08-20 16:46:00 -0500
• Engine revision c9b9d5780d
• Dart version 3.5.1
• DevTools version 2.37.2

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /home/geoffrey/Android/Sdk
• Platform android-34, build-tools 34.0.0
• Java binary at: /snap/android-studio/161/jbr/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11609105)
• All Android licenses accepted.

[✓] Chrome - develop for the web
• Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
• clang version 10.0.0-4ubuntu1
• cmake version 3.16.3
• ninja version 1.10.0
• pkg-config version 0.29.1

[✓] Android Studio (version 2024.1)
• Android Studio at /snap/android-studio/161
• Flutter plugin version 81.0.2
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11609105)

[✓] VS Code (version 1.91.1)
• VS Code at /usr/share/code
• Flutter extension can be installed from:
🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (3 available)
• ONEPLUS A6013 (mobile) • 0fabd948 • android-arm64 • Android 11 (API 30)
• Linux (desktop) • linux • linux-x64 • Ubuntu 24.04 LTS 6.8.0-105041-tuxedo
• Chrome (web) • chrome • web-javascript • Google Chrome 127.0.6533.99

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

• No issues found!

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.