[Bug] Black squares appear on webview resize !

EArminjon commented 3 years ago

[x] I have read the Get Started - Installation section
[x] I have read and done the Get Started - Setup Android section
[ ] I have read and done the Get Started - Setup iOS section
[x] I have already searched for the same problem

Environment

Technology	Version
Flutter version	2.0.2
Plugin version	5.2.1+1 , also on 4.0.0+4 (before null safety)
Android version	Android 10 (API 29)
iOS version
Xcode version

Device information:

MI 9T Xiaomi

Description

I would be able to resize InAppWebView without see weird effect. When wrapping InAppWebView with a container and then updating the container size, we can see some black square at the top of the screen... I don't know where they come from.

Please, look the video which i provided.

Steps to reproduce

Create new flutter projet
Add depencies
Add the following code
Run the app
Click to the button to resize the webview parent.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double height = 200;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Column(
        children: [
          TextButton(
            onPressed: () => setState(() => height += 10),
            child: Text("Add 10"),
          ),
          SizedBox(
            height: height,
            child: InAppWebView(
              initialData: InAppWebViewInitialData(data: """
                  <html lang="fr">
                           <meta name="viewport" content="width=device-width user-scalable=no zoom=1.1">
                           <style>img {max-width: 100%; height: auto}</style>
                           <body>
                            <div class="container"><div data-oembed-url="https://twitter.com/VigiMeteoFrance/status/1360091478098391040">
<blockquote class="twitter-tweet">
<p dir="ltr" lang="es">???? 4 dpts en <a href="https://twitter.com/hashtag/vigilanceRouge?src=hash&amp;ref_src=twsrc%5Etfw">#vigilanceRouge</a><br />
???? 35 dpts en <a href="https://twitter.com/hashtag/vigilanceOrange?src=hash&amp;ref_src=twsrc%5Etfw">#vigilanceOrange</a><br />
<br />
Restez informes sur <a href="https://t.co/CSYEovTI83">https://t.co/CSYEovTI83</a> <a href="https://t.co/7SCala2Y9i">pic.twitter.com/7SCala2Y9i</a></p>
&mdash; VigiM&eacute;t&eacute;oFrance (@VigiMeteoFrance) <a href="https://twitter.com/VigiMeteoFrance/status/1360091478098391040?ref_src=twsrc%5Etfw">February 12, 2021</a></blockquote>
<script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script></div>

<p>&nbsp;</p>
<br/></div>
                          </body>
                        </html>
                    """),
            ),
          ),
        ],
      ),
    );
  }
}

Images

Each time i clicked the button (so each time the webview is resized we see the black square)

https://user-images.githubusercontent.com/37028599/112539045-cc859880-8db0-11eb-92e8-927ada9814b3.mp4

Stacktrace/Logcat

Performing hot restart...
Syncing files to device Mi 9T...
W/ContentCatcher(25918): Failed to notify a WebView
E/InputMethodManager(25918): b/117267690: Failed to get fallback IMM with expected displayId=619 actual IMM#displayId=0 view=com.pichillilorenzo.flutter_inappwebview.in_app_webview.InAppWebView{f2ca933 VFEDHVCL. ........ 0,0-1080,1265}
Restarted application in 738ms.
D/EgretLoader(25918): EgretLoader(Context context)
D/EgretLoader(25918): The context is not activity
W/ContentCatcher(25918): Failed to notify a WebView
W/System  (25918): A resource failed to call release. 
W/ContentCatcher(25918): Failed to notify a WebView
E/InputMethodManager(25918): b/117267690: Failed to get fallback IMM with expected displayId=620 actual IMM#displayId=0 view=com.pichillilorenzo.flutter_inappwebview.in_app_webview.InAppWebView{1f1a2a8 VFEDHVCL. ........ 0,0-1080,550}
W/ContentCatcher(25918): Failed to notify a WebView
W/ContentCatcher(25918): Failed to notify a WebView
E/InputMethodManager(25918): b/117267690: Failed to get fallback IMM with expected displayId=621 actual IMM#displayId=0 view=com.pichillilorenzo.flutter_inappwebview.in_app_webview.InAppWebView{1f1a2a8 VFEDHVCL. ........ 0,0-1080,550}
W/ContentCatcher(25918): Failed to notify a WebView
W/ContentCatcher(25918): Failed to notify a WebView
E/InputMethodManager(25918): b/117267690: Failed to get fallback IMM with expected displayId=622 actual IMM#displayId=0 view=com.pichillilorenzo.flutter_inappwebview.in_app_webview.InAppWebView{1f1a2a8 VFEDHVCL. ........ 0,0-1080,578}
W/ContentCatcher(25918): Failed to notify a WebView

y

pichillilorenzo commented 3 years ago

Probably, you need to use useHybridComposition: true Android-specific webview option. Without Android Hybrid Composition enabled, Android WebView has bad performance in Flutter unfortunately. That's not a limitation of the plugin but on how Flutter PlatformViews work.

EArminjon commented 3 years ago

Oh, I will test that tomorrow thanks :).

EArminjon commented 3 years ago

useHybridComposition: true Fixed my issue, I've add an other package to get the android version if needed (device_info) base on Platform.isAndroid. (is there a faster solution ?)

Thank you !

pichillilorenzo commented 3 years ago

is there a faster solution ?

Nope. If you need to get the Platform version, you can try to implement it yourself using Flutter platform channels: https://flutter.dev/docs/development/platform-integration/platform-channels

pichillilorenzo / flutter_inappwebview