Flash Webview page when jump to a flutter page from the webview page

[debbiefu]

• [x] I have read the Get Started - Installation section
• [x] I have read and done the Get Started - Setup Android section
• [x] 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.8.0
Plugin version	5.3.2
Android version	Android 11
iOS version	N/A
Xcode version	N/A

Device information: Oppo, XiaoMi, Huawei, basically all the Android test devices we have.

Steps to reproduce

1. Open a fullscreen webview page A
2. Jump to a normal flutter page B

After navigate to the page B, it will quickly flash the content of page A, if you not see this at first try, just repeat the steps several times.

[github-actions[bot]]

👋 @debbiefu

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

[TDForLife]

This may be a bug of Android Hybrid Composition support in this WebView plugin

if you set the useHybridComposition to true to open the Hybrid Composition mode, then the described problem will come out

final InAppWebViewGroupOptions _webViewGroupOptions = InAppWebViewGroupOptions(
    android: AndroidInAppWebViewOptions(
      useHybridComposition: true,
    ),
  );

How to solve it ?

When you navigate to Page B, essentially you are push a Route to Navigator. This Route of Page B should remove its transition animation, like this :

1. Custom a transition Route

class CustomTransitionRoute extends CupertinoPageRoute<void> {

  CustomTransitionRoute({
    required this.builder,
    RouteSettings? settings,
  }) : super(builder: builder, settings: settings, fullscreenDialog: false);

  final WidgetBuilder builder;

  @override
  bool get opaque => true;

  @override
  Color? get barrierColor => null;

  @override
  String? get barrierLabel => null;

  @override
  bool get maintainState => true;

  @override
  Duration get transitionDuration => Duration.zero;
}

2. Wrapper your target page (Page B) with this CustomTransitionRoute when push it to Navigator

Navigator.of(context).push(CustomTransitionRoute(builder: (context) => const AboutPage()));

After all , this flash phenomenon will disappear ！

TransitionDuration set to ZERO, it means the page to page transition animation will be invalidated. So i guess the WebView high-performance render mode is refreshing when two page appear alternately, a part of Page B graphic buffer mixed with WebView page graphic buffer, due to the transition animation. (All the above may be a bullshit :no_mouth: I'm no sure)

You can set the transitionDuration to a bigger and bigger value, such as 10ms \ 50ms \ 100ms then, to test it, feel and understand it

[ZhangZhiH]

I also have this problem when I open the WebView and go back to the previous page, there will be a flash screen. Is there a good solution to access

[meg4cyberc4t]

I'm catching the same bug now, only on android (everything is fine with ios) and the value of useHybridComposition is set to true.

And I believe that simply shortening the transition time between pages is a bad decision.

Are there any other options?

[meg4cyberc4t]

Looks the same: https://github.com/flutter/flutter/issues/95545