[Wasm] ColorFiltered broken when running with Wasm

Steps to reproduce

Open https://demo.fleaflet.dev/tile_builder. Select the menu icon in the top left and verify that it states "Running with WASM". Notice the screen is completely white. Toggle the switch located next to the moon icon to reveal the map.

Open https://fleaflet-firebase--no-wasm-6h38zqtu.web.app/tile_builder. Select the menu icon in the top left and verify that it states "Running without WASM". Notice the map appears with an altered color.

I tested this with Chrome Dev 133.0.6847.2 & Microsoft Edge 132.0.2957.11. Unable to test on non-Chromium browsers.

The ColorFilter used is:

const ColorFilter.matrix(<double>[
      -1,
      0,
      0,
      0,
      255,
      0,
      -1,
      0,
      0,
      255,
      0,
      0,
      -1,
      0,
      255,
      0,
      0,
      0,
      1,
      0,
    ])

In flutter_map, we wrap this around a TileLayer using a ColorFiltered in the example app. The TileLayer is an OverflowBox > Transform.rotate > Stack > Positioned > AnimatedBuilder > RawImage. I suspect RawImage isn't interacting with the color filter correctly for some reason.

Expected results

Both maps should appear as maps (not white screens).

Actual results

See above.

Code sample

The concerned example page is https://github.com/fleaflet/flutter_map/blob/master/example/lib/pages/tile_builder.dart. This uses https://github.com/fleaflet/flutter_map/blob/master/lib/src/layer/tile_layer/tile_builder.dart and eventually the RawImage is used in https://github.com/fleaflet/flutter_map/blob/master/lib/src/layer/tile_layer/tile.dart.

Screenshots or Video

No response

Logs

No logs in any console.

Flutter Doctor output

Doctor output

@JaffaKetchup

Thanks for the report @JaffaKetchup
I see that the code example you shared is external package. Is there a chance to check with google_maps_flutter to see if same behavior occurs ? Also if you could check on upgraded stable or master to see if you still get same behavior or not.

TLDR: The child can be anything, not just an image. It occurs on both stable and beta.

I can't easily test whether google_maps_flutter has the same issue, and it's a very very different situation. flutter_map is 100% Flutter and just boils down to a ColorFiltered applied to a RawImage. google_maps_flutter boils down to JavaScript via https://pub.dev/packages/google_maps. I'm not really sure if its relevant whether google_maps works.

The demo.fleaflet.dev site is built from stable by https://github.com/fleaflet/flutter_map/blob/master/.github/workflows/master.yml. So this would suggest it occurs across beta and stable. I cannot currently test master.

I can however, confirm it occurs just with the following code sample in a standalone MRE:

ColorFiltered(
          colorFilter: const ColorFilter.matrix(<double>[
            -1,
            0,
            0,
            0,
            255,
            0,
            -1,
            0,
            0,
            255,
            0,
            0,
            -1,
            0,
            255,
            0,
            0,
            0,
            1,
            0,
          ]),
          child: Image(
            image: AssetImage('assets/icon.png'),
          ),
        ),

and the same issue occurs when using colored Text instead of Image.

The issue is not specific to RawImage or flutter_map.

Thanks for the update. I was able to replicate this on latest sdk versions (stable and master) using below code sample:

code


import 'package:flutter/material.dart';

/// Flutter code sample for [ColorFiltered].

void main() => runApp(const ColorFilteredExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ColorFiltered Sample')),
        body: const ColorFilteredExample(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          ColorFiltered(
            colorFilter: const ColorFilter.matrix(<double>[
              -1,
              0,
              0,
              0,
              255,
              0,
              -1,
              0,
              0,
              255,
              0,
              0,
              -1,
              0,
              255,
              0,
              0,
              0,
              1,
              0,
            ]),
            child: Image(
              image: AssetImage('assets/red-letter.jpg'),
            ),
          ),
          ColorFiltered(
            colorFilter: const ColorFilter.mode(
              Colors.grey,
              BlendMode.saturation,
            ),
            child: Image.network(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
            ),
          ),
        ],
      ),
    );
  }
}

With --wasm, the image is not displayed:

Without wasm, the image is rendered properly with applied color filters:

stable : 3.24.5
master : 3.27.0-1.0.pre.682

Normalize the translation column of the color matrix. (#161109)

Fixed with #161109

Normalize the translation column of the color matrix. (flutter#161109)

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.

Navigation Menu

Repository navigation

[Wasm] `ColorFiltered` broken when running with Wasm #159697

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Wasm] ColorFiltered broken when running with Wasm #159697

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

darshankawar commented on Dec 3, 2024

JaffaKetchup commented on Dec 3, 2024

darshankawar commented on Dec 4, 2024

eyebrowsoffire commented on Jan 8, 2025

github-actions commented on Jan 23, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

[Wasm] `ColorFiltered` broken when running with Wasm #159697