[Web] [CanvasKit] CupertinoTabBar with blur filter causes repeated JavaScript Warnings

Issue description

When using CupertinoTabBar with other opacity value than 1, which activates the blur filter on the CupertinoTabBar, you get the following warnings repeatedly in the Chrome dev tools Web console:

Cannot find native JavaScript type (SkCanvasSaveLayerWithFilterOverload) for type check  types.dart:238
types.dart:238 

Cannot find native JavaScript type (SkDeletable) for type check

Steps to Reproduce

The issue is caused by the CupertinoTabBar blur filter made with:

ClipRect(
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
    child: result,
  ),
);

This warning occurs when using:

  • Channel master –debug build with CanvasKit (Channel master, 1.22.0-10.0.pre.137)
  • Channel dev –debug build with CanvasKit (Channel dev, 1.22.0-9.0.pre)
  • Channel beta –debug build with CanvasKit (Channel beta, 1.21.0-9.2.pre)

The issue as such can also be duplicated by just using the backdrop filter with Image filter. I just thought a real use case example with a Widget that is supported on Web, is more relevant and it was the use case where I found the issue as well.

This small demo application shows a typical use case where the issue occurs repeatedly:

image

Demo source code
Source code for the demo can be found here:
https://gist.github.com/rydmike/e23559849c9197ffe0ec7dfc4a489a93

If you scroll the page you get the mentioned warnings every time the blur effect is rebuilt.

This warning is not visible in CanvasKit release builds where warnings are suppressed. The blur filter actually seem to work fine, also on debug builds, but its existence is an indication that something is wrong.

In apps that use CupertinoTabBar with opacity on all screens and all screens scroll, you get a lot of rebuilds of the CupertinoTabBar resulting in this warning being triggered repeatedly. I easily get over 100k rows of this warning in a app, making debugging the application close to impossible. The only workaround for now is to not use blur filter or any Widget using it. Additionally, the suspicion remains that the warning cannot be good, its cause might result in some other hidden issues.

If you in the demo app turn off the “Use opacity on bottom bar” the issue goes away because the CupertinoTabBar only includes the blur effect causing the warning when the background color opacity is other than 1.

Demo source code
Source code for the issue demo application can be found here:
https://gist.github.com/rydmike/e23559849c9197ffe0ec7dfc4a489a93

And the issue can be observed with debug SKIA builds on master, dev and beta channels:

flutter run -d chrome --debug --verbose --dart-define=FLUTTER_WEB_USE_SKIA=true 
--dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true

When built and running in Chrome open up the Chrome Dev Tools console to see the issue as shown in the screenshot above.

  • In Windows open Chrome dev tools console with: CTRL+SHIT+J
  • On Mac open Chrome dev tools console with: CMD+OPTION+J
Flutter doctor
flutter doctor -v
[√] Flutter (Channel beta, 1.21.0-9.2.pre, on Microsoft Windows [Version 10.0.18363.959], locale en-US)     
    • Flutter version 1.21.0-9.2.pre at C:\Users\mryds\fvm\versions\beta
    • Framework revision 81a45ec2e5 (2 weeks ago), 2020-08-27 14:14:33 -0700
    • Engine revision 20a9531835
    • Dart version 2.10.0 (build 2.10.0-7.3.beta)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
    • Android SDK at C:\Users\mryds\AppData\Local\Android\sdk
    • Platform android-29, build-tools 29.0.1
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] IntelliJ IDEA Community Edition (version 2019.2)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2018.3.1
    • Flutter plugin version 35.3.3
    • Dart plugin version 192.7402

[√] VS Code (version 1.48.2)
    • VS Code at C:\Users\mryds\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.14.1

[√] Connected device (4 available)
    • Nexus 7 (mobile) • 0a99f5e8   • android-arm    • Android 6.0.1 (API 23)
    • Web Server (web) • web-server • web-javascript • Flutter Tools
    • Chrome (web)     • chrome     • web-javascript • Google Chrome 85.0.4183.83
    • Edge (web)       • edge       • web-javascript • Microsoft Edge 85.0.564.44

• No issues found!

1 possible answer(s) on “[Web] [CanvasKit] CupertinoTabBar with blur filter causes repeated JavaScript Warnings

  1. @yjbanov LGTM 👍

    Web SKIA debug build on Channel master, 1.22.0-10.0.pre.338, this page has the blurfilter in question on both the appbar and bottom navbar, no warnings anymore in the console. Scrolling in debug builds on this page where the previous Flutter version(s) easily triggered thousands of the warnings shown earlier, shows that the warnings are gone now.

    image

    Thanks for this 💙 – closing the issue.