[webview_flutter] After repeatedly switching the background foreground in a short period of time, the update of html will be delayed, and sometimes it will be stuck. The html interface will not be updated until some other actions on the interface must be triggered.

[BigPlayerT]

Steps to reproduce

1、Create an application introduction using webview_flutter;
2、Configure a page with slightly complex interactions，
3、Switch the application repeatedly in the foreground and background in a short time, or repeatedly switch to other apps, and then return to your own app.
4、Carry out relevant operations on the web page。

Expected results

The interface is updated according to the js operation.

Actual results

If the interface update fails, actions such as sliding or input box focus must be triggered before the interface can be updated.

The sliding response of the interface is delayed.

Code sample

1

Screenshots or Video

·1

Logs

1

Flutter Doctor output

[✓] Flutter (Channel stable, 3.16.5, on macOS 14.0 23A344 darwin-arm64, locale zh-Hans-CN)
• Flutter version 3.16.5 on channel stable at /Users/yunpang/sdk/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 78666c8 (4 months ago), 2023-12-19 16:14:14 -0800
• Engine revision 3f3e560236
• Dart version 3.2.3
• DevTools version 2.28.4
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at /Users/yunpang/Library/Android/sdk
• Platform android-34, build-tools 33.0.1
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15E204a
• CocoaPods version 1.14.3

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

[✓] Android Studio (version 2023.1)
• 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 17.0.7+0-17.0.7b1000.6-10550314)

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

[✓] Connected device (4 available)
• YAL AL00 (mobile) • STS0219711000547 • android-arm64 • Android 10 (API 29)
• 测试12 (mobile) • 00008101-00050D600ED8001E • ios • iOS 17.4.1 21E236
• macOS (desktop) • macos • darwin-arm64 • macOS 14.0 23A344 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 124.0.6367.92
! Error: Browsing on the local area network for Huanyu的 iPhone 14 Pro Max. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
! Error: Browsing on the local area network for Huanyu的Apple Watch S8. Ensure the device is unlocked and discoverable via Bluetooth. (code -27)

[✓] Network resources
• All expected network resources are available.

• No issues found!

[OnClickListener2048]

Is there a screen recording?

[BigPlayerT]

The following is my screen recording in actual development, which successfully reproduces this problem.
https://github.com/flutter/flutter/assets/68584496/899c7bb1-3dea-4d17-999b-5e7294ef0864

[BigPlayerT]

Is there a screen recording?

The following is my screen recording in actual development, which successfully reproduces this problem. https://github.com/flutter/flutter/assets/68584496/899c7bb1-3dea-4d17-999b-5e7294ef0864

The first part can respond normally. After frequent switching of the front and background, the application's DOM tree update requires operations such as sliding or input box focus before it can be successfully updated.

[BigPlayerT]

At present, my solution is to monitor the front and background switching of the application, remove the WebViewWidget when cutting into the background, and add the WebViewWidget after cutting into the foreground.

[OnClickListener2048]

Is your page h5? What we know so far is that after returning to the app, we found that the click recognition area of the button on the h5 page moved up.

[BigPlayerT]

Is your page h5? What we know so far is that after returning to the app, we found that the click recognition area of the button on the h5 page moved up.

It's h5. I enlarged the video a little when switching applications in the video.

You can look at the back part of my video. When I clicked the button to switch, DOM did not immediately respond to the update until I swiped or clicked another button.

[huycozy]

Hi @BigPlayerT
Please provide a completed and minimal reproducible code sample that doesn’t include 3rd party plugins or complex production code; and share a recorded video demo would also be helpful.

And please consider posting issues in English so that others can also look into. Thanks!

[BigPlayerT]

Hi @BigPlayerT Please provide a completed and minimal reproducible code sample that doesn’t include 3rd party plugins or complex production code; and share a recorded video demo would also be helpful.

And please consider posting issues in English so that others can also look into. Thanks!

example.zip
上面是我写的一个复现用例，其中包括我在复现时所用到的h5代码。（This is a reproduction use case I wrote, which includes the h5 code I used in the reproduction.）

6_1714449679.mp4

这个视频是对应的复现操作，在前几次点击时，界面正常更新了，而在频繁进行前后台切换后，H5界面的更新必须伴随滑动或输入框的聚焦操作之后。（This video is a corresponding reproduction operation. The interface was updated normally during the first few clicks, but after frequent front-end and back-end switching, the update of the H5 interface must be accompanied by sliding or focusing operations in the input box.）
Sorry, my English is very poor.

[danagbemava-nc]

Hi @BigPlayerT , what version of webview_flutter are you using? What version of android is your device running? Can you also try upgrading to the latest version of flutter stable to see if you still experience this issue?

[BigPlayerT]

Hi @BigPlayerT , what version of webview_flutter are you using? What version of android is your device running? Can you also try upgrading to the latest version of flutter stable to see if you still experience this issue?
webView_flutter's version is 4.5.0;
android's version is 10.

[huycozy]

@BigPlayerT This doesn't seem to be related to HTML page content as you shared in sample code above as I can see it on a other web like github.com or google.com. I checked this and observed this behavior:

The web loaded in webview_flutter can be interacted normally if I switch to only one app. Once I switch to two apps or more, the web becomes frozen and can't interact with any elements.

Also, the issue only appears on Android but not on iOS. Verifying with the latest package version webview_flutter: ^4.7.0, webview_flutter_android: ^3.16.1.

Demo

OP's sample (pure HTML page)	github.com site
Screen.Recording.2024-05-06.at.11.23.40.mov	Screen.Recording.2024-05-06.at.12.06.45.mov

Could you retry and confirm this is the issue you are reporting?

[OnClickListener2048]

Think this is the same problem with #146499

[huycozy]

Oh yes, thanks for linking the issue @OnClickListener2048. I re-checked this on Flutter master channel (my current is 3.22.0-23.0.pre.43), the issue disappeared. I'm using Pixel 7 Android 14.

@BigPlayerT Could you confirm this on Flutter master channel with your Android 10 device?