[Web][CanvasKit] Web App crashes if using ImageFiltered. #144015

liuzs0666 · 2024-02-23T14:12:15Z

Steps to reproduce

Use ImageFiltered with simple ColorFilter or ImageFilter.compose of two ColorFilter

Expected results

Should see the filtered child widget.

Actual results

App crashes. Throws Error: TypeError: Instance of 'EngineColorFilter': type 'EngineColorFilter' is not a subtype of type 'CkManagedSkImageFilterConvertible' in Chrome DevTools

Code sample

import 'package:flutter/material.dart';

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

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

  static const _darkenImageFilter = ColorFilter.mode(
    Color.fromARGB(0xff, 0x60, 0x60, 0x60),
    BlendMode.darken,
  );

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ImageFiltered(
            imageFilter: _darkenImageFilter,
            child: const Icon(Icons.abc_rounded),
          ),
        ),
      ),
    );
  }
}

https://dartpad.dev/?id=d01d7447b2d8fed2a2f9cf7ed7906b50

Screenshots or Video

Screenshots / Video demonstration

Logs

errors.dart:297 Uncaught (in promise) Error: TypeError: Instance of 'EngineColorFilter': type 'EngineColorFilter' is not a subtype of type 'CkManagedSkImageFilterConvertible'
    at Object.throw_ [as throw] (errors.dart:297:3)
    at Object._failedAsCheck (rti.dart:1385:3)
    at dart_rti.Rti.new._generalAsCheckImplementation (rti.dart:1363:3)
    at dart_rti.Rti.new._installSpecializedAsCheck (rti.dart:1258:30)
    at _engine.ImageFilterEngineLayer.new.preroll (layer.dart:399:14)
    at _engine.OffsetEngineLayer.new.prerollChildren (layer.dart:122:12)
    at _engine.OffsetEngineLayer.new.preroll (layer.dart:356:9)
    at _engine.OffsetEngineLayer.new.prerollChildren (layer.dart:122:12)
    at _engine.OffsetEngineLayer.new.preroll (layer.dart:356:9)
    at _engine.TransformEngineLayer.new.prerollChildren (layer.dart:122:12)
    at _engine.TransformEngineLayer.new.preroll (layer.dart:356:9)
    at _engine.RootLayer.new.prerollChildren (layer.dart:122:12)
    at _engine.RootLayer.new.preroll (layer.dart:111:19)
    at _engine.LayerTree.new.preroll (layer_tree.dart:29:5)
    at layer_tree.dart:89:16
    at Object.timeAction (profiler.dart:41:18)
    at _engine.Frame.new.raster (layer_tree.dart:88:5)
    at _engine.Rasterizer.new.draw (rasterizer.dart:48:20)
    at draw.next (<anonymous>)
    at runBody (async_patch.dart:84:54)
    at Object._async [as async] (async_patch.dart:127:5)
    at _engine.Rasterizer.new.draw (rasterizer.dart:32:20)
    at _engine.CanvasKitRenderer.new.renderScene (renderer.dart:415:21)
    at renderScene.next (<anonymous>)
    at runBody (async_patch.dart:84:54)
    at Object._async [as async] (async_patch.dart:127:5)
    at _engine.CanvasKitRenderer.new.renderScene (renderer.dart:400:27)
    at _engine.EnginePlatformDispatcher.new.render (platform_dispatcher.dart:777:22)
    at render.next (<anonymous>)
    at runBody (async_patch.dart:84:54)
    at Object._async [as async] (async_patch.dart:127:5)
    at _engine.EnginePlatformDispatcher.new.render (platform_dispatcher.dart:758:22)
    at _engine.EngineFlutterWindow.__.render (window.dart:93:5)
    at binding$2._ReusableRenderView.new.compositeFrame (view.dart:256:7)
    at binding$.WidgetsFlutterBinding.new.drawFrame (binding.dart:587:19)
    at binding$.WidgetsFlutterBinding.new.drawFrame (binding.dart:991:13)
    at [_handlePersistentFrameCallback] (binding.dart:448:5)
    at [_invokeFrameCallback] (binding.dart:1386:7)
    at binding$.WidgetsFlutterBinding.new.handleDrawFrame (binding.dart:1311:9)
    at [_handleDrawFrame] (binding.dart:1169:5)
    at Object.invoke (platform_dispatcher.dart:1346:5)
    at _engine.EnginePlatformDispatcher.new.invokeOnDrawFrame (platform_dispatcher.dart:260:5)
    at initialization.dart:185:36
    at Object._checkAndCall (operations.dart:550:37)
    at Object.dcall (operations.dart:555:39)
    at ret (js_allow_interop_patch.dart:17:11)

Flutter Doctor output

I'm running under a separate branch of Flutter SDK but this bug can be reproduced in stable channel on DartPad, based on Dart SDK 3.3.0 and Flutter SDK 3.19.0.

The text was updated successfully, but these errors were encountered:

darshankawar · 2024-02-26T07:14:33Z

Thanks for the report. I was able to replicate this on latest stable and master version along with stable 3.16.0 as well, but not on stable 3.13.0, wherein it renders properly.

I'll label this as regression.

stable, master flutter doctor -v

[!] Flutter (Channel stable, 3.19.0, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 3.19.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 bae5e49bc2 (2 days ago), 2024-02-13 17:46:18 -0800
    • Engine revision 04817c99c9
    • Dart version 3.3.0
    • DevTools version 2.31.1
    • 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.20.0-13.0.pre.31, on macOS 12.2.1 21D62
    darwin-x64, locale en-GB)
    • Flutter version 3.20.0-13.0.pre.31 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 d8503febb1 (2 hours ago), 2024-02-25 23:42:25 -0500
    • Engine revision fd3136782a
    • Dart version 3.4.0 (build 3.4.0-175.0.dev)
    • DevTools version 2.33.0-dev.11
    • 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.

kevmoo · 2024-02-28T22:56:49Z

Here's the line with the bad cast: https://github.com/flutter/engine/blob/b1e9854b5ef4531a4497eb108c60454c1423e6ae/lib/web_ui/lib/src/engine/canvaskit/layer.dart#L409

…ond child bounds (#52704) When a ColorFilter affects transparent black, it will expand its bounds to the entire screen, even if the `saveLayer` call is bounded. This applies a clip before applying the ColorFilter so the filter is bounded to just the child drawings. Also fixes bug with ColorFilter being used as an ImageFilter. Before: ![canvaskit_colorfilter_bounds_before](https://github.com/flutter/engine/assets/1961493/25394b40-c40d-44fb-9c78-9638a40d3329) After: ![canvaskit_colorfilter_bounds_after](https://github.com/flutter/engine/assets/1961493/b25e4084-ccae-4e41-b6e6-37e8cbbd9d54) Fixes flutter/flutter#88866 Fixes flutter/flutter#144015 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide] and the [C++, Objective-C, Java style guides]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I added new tests to check the change I am making or feature I am adding, or the PR is [test-exempt]. See [testing the engine] for instructions on writing and running engine tests. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I signed the [CLA]. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/wiki/Tree-hygiene#overview [Tree Hygiene]: https://github.com/flutter/flutter/wiki/Tree-hygiene [test-exempt]: https://github.com/flutter/flutter/wiki/Tree-hygiene#tests [Flutter Style Guide]: https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo [C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style [testing the engine]: https://github.com/flutter/flutter/wiki/Testing-the-engine [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/wiki/Tree-hygiene#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/wiki/Chat

darshankawar added the in triage Presently being triaged by the triage team label Feb 26, 2024

yjbanov added P2 Important issues not at the top of the work list triaged-web Triaged by Web platform team labels Feb 29, 2024

harryterkelsen self-assigned this May 9, 2024

harryterkelsen mentioned this issue May 9, 2024

[canvaskit] Clip before applying ColorFilter so it doesn't filter beyond child bounds flutter/engine#52704

Merged

8 tasks

harryterkelsen closed this as completed in flutter/engine#52704 May 10, 2024

darshankawar added the r: fixed Issue is closed as already fixed in a newer version label May 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Web][CanvasKit] Web App crashes if using ImageFiltered. #144015

[Web][CanvasKit] Web App crashes if using ImageFiltered. #144015

liuzs0666 commented Feb 23, 2024

darshankawar commented Feb 26, 2024

kevmoo commented Feb 28, 2024

[Web][CanvasKit] Web App crashes if using ImageFiltered. #144015

[Web][CanvasKit] Web App crashes if using ImageFiltered. #144015

Comments

liuzs0666 commented Feb 23, 2024

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

darshankawar commented Feb 26, 2024

kevmoo commented Feb 28, 2024