[Hybrid composition] The Background and Overlay ImageView leak

[Nayuta403]

After exiting the PlatformVIew page, the ImageView remains in flutterview.

video：

Steps to Reproduce

repo: https://github.com/cyanglaz/platform_view_builder_ops_demo

1. Change the implementation of WebView in the code to HybridComposition

webview_flutter_android-2.10.4/lib/webview_surface_android.dart：

   onCreatePlatformView: (PlatformViewCreationParams params) {
            final Color? backgroundColor = creationParams.backgroundColor;
            return _createViewController(
              // On some Android devices, transparent backgrounds can cause
              // rendering issues on the non hybrid composition
              // AndroidViewSurface. This switches the WebView to Hybrid
              // Composition when the background color is not 100% opaque.
              hybridComposition:
              //  MODIFY HERE !!
              // backgroundColor != null && backgroundColor.opacity < 1.0,
              true,
              id: params.id,
              viewType: 'plugins.flutter.io/webview',

2. Execute flutter run on the code sample
3. Open Layout Inspector
4. Click IOS NavigationBar BackdropFilter
5. Back to home widget

Expected results:

At home, only the FlutterSurfaceView is in the FluterView

Actual results:

The Background and Overlay ImageView leak

Logs

[✓] Flutter (Channel main, 3.5.0-10.0.pre.42, on macOS 13.0 22A380 darwin-arm64, locale zh-Hans-CN)
    • Flutter version 3.5.0-10.0.pre.42 on channel main at /Users/bytedance/Desktop/flutter_repo
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 12b05ca7e8 (2 weeks ago), 2022-10-24 05:09:08 -0400
    • Engine revision 6bb2f03e6f
    • Dart version 2.19.0 (build 2.19.0-330.0.dev)
    • DevTools version 2.18.0
    • Pub download mirror https://dart-pub.byted.org
    • Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/bytedance/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • ANDROID_HOME = /Users/bytedance/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    ! CocoaPods 1.10.2 out of date (1.11.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin
        usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

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

[✓] Android Studio (version 2021.2)
    • 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 11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.73.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.52.0

[✓] Connected device (4 available)
    • M2012K11AC (mobile) • 6ac28271                             • android-arm64  • Android 12 (API 31)
    • iPhone 14 (mobile)  • 4571C4DB-20BB-4CEF-9D14-1B3F44EFC760 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
    • macOS (desktop)     • macos                                • darwin-arm64   • macOS 13.0 22A380 darwin-arm64
    • Chrome (web)        • chrome                               • web-javascript • Google Chrome 106.0.5249.119

[✓] HTTP Host Availability
    • All required HTTP hosts are available

[exaby73]

Hello @Nayuta403. Could you possibly reduce the code sample to a single main.dart file?

[Nayuta403]

@exaby73 This will require some extra work and I am working on fixing the issue. example can be run directly, and steps are provided. ：）

[exaby73]

The repo has a simple WebView. I would need the full code snippet the reproduces the issue. Please provide one once you can

[Nayuta403]

@exaby73 Yes, just like the steps I described above, this problem only requires opening and exiting a simple webview. You can see in Layout Inspector that the ImageView is still in FlutterView, even though there is no PlatformView. The only caveat is that we need to simply modify the web_flutter plugin source code to run it in Hybrid composition mode.

[exaby73]

You are suggesting to change the source implementation of the web view code which is introducing this bug. In it's current form, there isn't any bug, though it misses hybrid composition mode.

Since Hybrid Composition on webview_flutter isn't officially supported, this makes this bug invalid unfortunately. Therefore, I'll close this issue. You can raise another requesting official support for Hybrid Composition mode, or if you need help with this implementation, you can find resources on https://flutter.dev/community or ask your question on StackOverflow. Thank you.

[Nayuta403]

My feedback is not a problem with webview_flutter, it is a problem with hybrid composition (HC) mode. At present, we can still use HC mode in the master channel, and once we use HC, the problem I feedback will appear. You can reproduce this problem in any HC example. I just used webview_flutter because I happened to be looking at the #39270 issue, which provides this exmaple. It's simple enough, and I've provided detailed step-by-step instructions, as well as screenshots and screen recordings. Should we focus on solving problems? Or cc @gaaclarke @Hixie