Repository navigation
[Webview_flutter]: The screen that has a flutter web page doesn't scroll properly after closing dialog box. #101626
Description
Steps to Reproduce
I have such a problem when using webview_flutter, opening the flutter web page for the first time can slide normally, the click event in the page is also normal, you can perform the click behavior.The problem is, when I try to slide off (cancel back halfway), the page scroll is not so smooth and the page doesn't perform click behavior.There is also a way to test that the page is not smooth. After opening the flutter web page, if you open a dialog box, when the dialog box closes, the flutter web page is not smooth, and can not respond to gestures normally.
- Execute
flutter runon the code sample - Open a new page, add a button to the appBar, and use the WebView in the body;
- Enter the page for the first time, everything is normal, if then click the ammonium button on the appBar to open a dialog box, after the dialog box is closed, the page scroll abnormal.
Expected results: The flutter web page responds normally to gesture slide and click events
Actual results: The page does not scroll smoothly and cannot respond to events properly
Code sample
class BrowserPage extends StatefulWidget {
const BrowserPage({Key? key}) : super(key: key);
@override
State<BrowserPage> createState() => _BrowserPageState();
}
class _BrowserPageState extends State<BrowserPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Web Browser'),
actions: [
IconButton(
onPressed: () {
showDialog<void>(
context: context,
barrierDismissible: true,
builder: (BuildContext dialogContext) {
return AlertDialog(
title: const Text('Dialog'),
content: const Text('Test dialog body.'),
actions: <Widget>[
TextButton(
child: const Text('Close'),
onPressed: () {
Navigator.of(dialogContext).pop();
},
),
],
);
},
);
},
icon: const Icon(Icons.add),
),
],
),
body: WebView(
initialUrl: 'http://192.168.1.68:8000/brand_list',
debuggingEnabled: true,
gestureNavigationEnabled: true,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller) {
controller.currentUrl().then((value) => debugPrint(value));
},
onProgress: (int progress) {
debugPrint("WebView is loading (progress : $progress%)");
},
),
);
}
}Logs
Analyzing flutter_mall_demo...
No issues found! (ran in 1.6s)
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.4, on macOS 12.3 21E230 darwin-arm, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.2.3)
[✓] VS Code (version 1.66.0)
[✓] Connected device (3 available)
[✓] HTTP Host Availability
• No issues found!
Activity
darshankawar commentedon Apr 11, 2022
@luggin
The url you are passing seems to be local to your setup which we can't access even through browser
initialUrl: 'http://192.168.1.68:8000/brand_list',. So I tried withhttps://flutter.dev/instead and ran it on iOS simulator with which there were not issues observed while scrolling after closing dialog.101626.mov
Also, we can't play the video you attached, so can't really tell what issue you are facing.
luggin commentedon Apr 13, 2022
ios_issue.mov
Thank you very much for your answer, video format questions, reissue the video.
I open the https://flutter.dev/ this url test is also no problem.
When I use the flutter build web developed page in the IOS platform will have a problem, the ANDROID platform does not have this problem, you can try to open the https://flutter.github.io/samples/web/charts/#/ test.
darshankawar commentedon Apr 13, 2022
@luggin
From the video I do see the issue, but we'll need a complete runnable reproducible code sample that shows the behavior you are reporting, so please provide the same to address this issue properly.
luggin commentedon Apr 13, 2022
Thanks again for your answer, if you use the sample code, change the url to
https://flutter.github.io/samples/web/charts/#/
It is normal to enter the page and scroll behavior for the first time. After opening the dialog box is closed, the scroll of the page appears abnormal behavior.
I use webview_flutter to open https://flutter.dev/ found no similar problem, if it is a flutter web application, the new blank project will also be the problem described above.
This is a URl that I found on github,
https://flutter.github.io/samples/#?platform=web
It is flutter web demos, open any example with the same effect on the ISO platform as in the application I wrote, without the Android platform.
darshankawar commentedon Apr 13, 2022
Thanks for the update. I do see same behavior when I use
https://flutter.github.io/samples/web/charts/#/, but not with below urls:https://flutter.github.io/samples/#?platform=webandhttps://flutter.github.io/samples/andhttps://flutter.github.io/samples/charts.html.10626_1.mov
101626_s.mov
So it seems to be only happening with specific urls. If I manually access https://flutter.github.io/samples/web/charts/#/ , I don't see
/web/chartsin the samples url link, so I am wondering from where https://flutter.github.io/samples/web/charts/#/ is coming.luggin commentedon Apr 14, 2022
Yes, the standard web page is normal.If the flutter web page, abnormal scrolling behavior occurs on the ios platform.I have created a new flutter web project, the project content is relatively simple, and I only put one listview in the project root path page, for testing.
Project source code: https://github.com/luggin/flutter_web_demo.git
After you package projects with the following command, the packaged files are accessed using nginx:
flutter build web --release --web-renderer html --base-href /
This is the project access test address:
http://msp.rhip.teleye.cn:8082/#/
darshankawar commentedon Apr 14, 2022
Thanks for the update. Per my verification here #101626 (comment), keeping this issue open and labeling for further investigation.
stable, master flutter doctor -v
runnable code sample
18 remaining items
Earyongan commentedon Jan 10, 2024
issue still exist on Flutter 3.16.5 • channel stable.
libexdui commentedon May 24, 2024
issue still exist on Flutter 3.19.6 • channel stable.
himotou commentedon Jun 24, 2024
My WebGL page is implemented with threejs. After gesture problems occur, it can only be restored by reloading the page. The result is that the experience is too poor.
I made some attempts to avoid the gesture problem in a user insensitive way. I found that re instantiating the OrbitControls of Threejs on the web side can also restore the gesture, but frequent instantiation will lead to some other gesture problems.
I hope it will be helpful to fix this problem!
himotou commentedon Aug 8, 2024
When opening a new page on the webview, this situation will also occur when using gestures to return when exiting.
In this video, click the small house button in the upper right corner to enter a new page.
The first four returns were returned by clicking the arrow in the upper left corner, and the page gestures were always normal after returning.
The 5th and 6th returns were also normal through gestures. After the seventh page return, the page could not be rotated, and the eighth was completely unresponsive.
I have observed many times that in most cases, the model touch will be abnormal after returning once through gestures, and occasionally it will appear twice (as in the video).
This video was recorded on iPhone14, 17.5.1 real machines.
It did not reproduce on iPhone15, 17.2 simulators
bc63ca842ccacfad905ba5426ca51aa7.mov
Sample code
klaus-jakobsen-se commentedon Dec 13, 2024
@davidchzh I think I see similar at my end.
Initial webview works as intended. After pushing a bottom sheet and use the webview again the mouse one pan changes to rotate instead of pan and in the last try it stops working.
threeja_webview_v2.mov
Code:
void main() async {
runApp(CakeMan());
}
class CakeMan extends StatelessWidget {
const CakeMan({super.key});
@OverRide
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("3d test")),
body: ThreeDScene(),
floatingActionButton: Builder(builder: (context) {
return FloatingActionButton(
onPressed: () async {
await showBottomSheet(context: context, builder: (_) => Container(height: 200, child: Center(child: Text("Hello"))));
},
child: Icon(Icons.add),
);
}),
),
);
}
}
class ThreeDScene extends StatefulWidget {
const ThreeDScene({super.key});
@OverRide
_ThreeDSceneState createState() => _ThreeDSceneState();
}
class _ThreeDSceneState extends State {
late WebViewController _controller;
String localhostUrl = "http://localhost:5173/";
String threejsWebsiteExample = "https://virtual.bbcmic.ro/?disc1=elite.ssd&autoboot";
@OverRide
void initState() {
super.initState();
print("ckae for me later");
_controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setNavigationDelegate(
NavigationDelegate(
onProgress: (int progress) {
print('WebView is loading (progress : $progress%)');
},
onPageStarted: (String url) {
print('Page started loading: $url');
},
onPageFinished: (String url) {
print('Page finished loading: $url');
},
onWebResourceError: (WebResourceError error) {
print('''
WebView Error:
- Code: ${error.errorCode}
- Description: ${error.description}
- Type: ${error.errorType}
''');
},
),
)
..setOnConsoleMessage((message) {
print('Console: $message');
})
..addJavaScriptChannel(
'cake',
onMessageReceived: (JavaScriptMessage message) async {
print('cake clicked: ${message.message}');
},
)
..loadRequest(Uri.parse(threejsWebsiteExample));
}
@OverRide
void dispose() {
super.dispose();
}
@OverRide
Widget build(BuildContext context) {
return Column(
children: [
Container(
height: 600,
width: double.infinity,
child: WebViewWidget(
controller: _controller,
)),
],
);
}
void sideView() {
_controller.runJavaScript('topView();');
}
void frontView() {
_controller.runJavaScript('frontView();');
}
void loopAnimate() {
_controller.runJavaScript('animateLoop();');
}
}
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.2, on macOS 14.1 23B2073 darwin-arm64, locale da-DK)
[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
✗ cmdline-tools component is missing
Run
path/to/sdkmanager --install "cmdline-tools;latest"See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run
flutter doctor --android-licensesto accept the SDK licenses.See https://flutter.dev/to/macos-android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] IntelliJ IDEA Community Edition (version 2024.2.1)
[✓] VS Code (version 1.95.3)
[✓] Connected device (4 available)
xxxx
[✓] Network resources
Running ios simulator
himotou commentedon Dec 20, 2024
issue still exist on Flutter 3.27.1 • channel stable.
Muzammil7 commentedon Jan 2, 2025
I had a same problem and i found the root cause is not because of closing the dialog box, if you have any widget over the webview like positioned in stack or dialog box etc, tapping that is causing issue, I simply wrap those widget with pointerinterceptor and gave intercepting to true, then everything became normal.
If you need any support for flutter bug fixes, msg me on linkedin https://www.linkedin.com/in/muzammil-s-06995b169/
klaus-jakobsen-se commentedon Jan 30, 2025
@Muzammil7 Tried putting pointerinterceptor and gave intercepting to true on the widgets like a drawer, but still seing the issue. Do you have time to share some code for reference :)?
klaus-jakobsen-se commentedon Mar 4, 2025
Tested on Flutter 3.29.0 still an issue
ArvinYue commentedon Mar 24, 2025
I also encountered the same problem. Have you solved it
klaus-jakobsen-se commentedon Aug 12, 2025
I've added a PR with a potential fix. Lets see how the review process goes. #173549
himotou commentedon Sep 29, 2025
I did not reproduce the problem on iPhone14 iOS18.6.2, but it still existed on another iPhone8 iOS16.7.7. The same situation occurred with Flutter versions 3.27.4/3.32.8.
At present, it seems that the update of the iOS system version fixed the problem. If anyone encounters this problem again, please share the iOS system version used.
himotou commentedon Nov 5, 2025
Thank you, it did work. @Muzammil7
To ensure compatibility with iPhone versions below 18, some workarounds are still needed.
I used a Stack as the root node, wrapped an overlay with PointerInterceptor, and controlled the overlay's visibility conditionally. After multiple tests, no issues arose.
It seems the problem is now solved. Note that repeatedly using the pointer_interceptor plugin incurs some performance overhead.