Open luggin opened 2 years ago
darshankawar
commented
2 years ago @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 with https://flutter.dev/ instead and ran it on iOS simulator with which there were not issues observed while scrolling after closing dialog.
Also, we can't play the video you attached, so can't really tell what issue you are facing.
luggin
commented
2 years ago https://user-images.githubusercontent.com/5601597/163093610-76cc5125-9970-4cc4-95e7-f1dccef40cdb.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
commented
2 years ago @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
commented
2 years ago @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 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.
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
commented
2 years ago 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=web and https://flutter.github.io/samples/ and https://flutter.github.io/samples/charts.html.
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/charts in the samples url link, so I am wondering from where https://flutter.github.io/samples/web/charts/#/ is coming.
luggin
commented
2 years ago 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
commented
2 years ago Thanks for the update. Per my verification here https://github.com/flutter/flutter/issues/101626#issuecomment-1098035584, keeping this issue open and labeling for further investigation.
ankiimation
commented
1 year ago any updates?
HammadBukhari
commented
1 year ago This issue still exists in Flutter 3.7.x and only happens on a page containing interactive components like WebGL models. For example something like this 3D model
cccmax
commented
1 year ago Requirement:
1 Flutter Web , use ScrollView （any widget that can slide） 2 Flutter App , ios , showGeneralDialog, barrierDismissible=true , click the screen to close the dialog
Earyongan
commented
8 months ago issue still exist on Flutter 3.16.5 • channel stable.
libexdui
commented
3 months ago issue still exist on Flutter 3.19.6 • channel stable.
DavidChZh
commented
2 months ago 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!
DavidChZh
commented
1 month ago 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
https://github.com/user-attachments/assets/26eaa91f-f64b-4e72-aea4-97fb4f7c20db
Sample code
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';
void main() => runApp(const MaterialApp(home: WebViewExample()));
class WebViewExample extends StatefulWidget {
const WebViewExample({super.key});
@override
State<WebViewExample> createState() => _WebViewExampleState();
}
class _WebViewExampleState extends State<WebViewExample> {
late final WebViewController _controller;
@override
void initState() {
super.initState();
// #docregion platform_features
late final PlatformWebViewControllerCreationParams params;
if (WebViewPlatform.instance is WebKitWebViewPlatform) {
params = WebKitWebViewControllerCreationParams(
allowsInlineMediaPlayback: true,
mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
);
} else {
params = const PlatformWebViewControllerCreationParams();
}
final WebViewController controller =
WebViewController.fromPlatformCreationParams(params);
// #enddocregion platform_features
controller
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setBackgroundColor(const Color(0x00000000))
..loadRequest(
Uri.parse('https://threejs.org/examples/#webgl_geometry_teapot'));
// #docregion platform_features
if (controller.platform is AndroidWebViewController) {
AndroidWebViewController.enableDebugging(true);
(controller.platform as AndroidWebViewController)
.setMediaPlaybackRequiresUserGesture(false);
}
// #enddocregion platform_features
_controller = controller;
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.green,
appBar: AppBar(
title: const Text('Flutter WebView example'),
// This drop down menu demonstrates that Flutter widgets can be shown over the web view.
actions: <Widget>[
NavigationControls(webViewController: _controller),
const SampleMenu(),
],
),
body: WebViewWidget(controller: _controller),
);
}
}
enum MenuOptions {
showUserAgent,
listCookies,
clearCookies,
addToCache,
listCache,
clearCache,
navigationDelegate,
doPostRequest,
loadLocalFile,
loadFlutterAsset,
loadHtmlString,
transparentBackground,
setCookie,
logExample,
basicAuthentication,
}
class SampleMenu extends StatelessWidget {
const SampleMenu({super.key});
@override
Widget build(BuildContext context) {
return PopupMenuButton<MenuOptions>(
key: const ValueKey<String>('ShowPopupMenu'),
onSelected: (MenuOptions value) {},
itemBuilder: (BuildContext context) => <PopupMenuItem<MenuOptions>>[
const PopupMenuItem<MenuOptions>(
value: MenuOptions.showUserAgent,
child: Text('test'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.listCookies,
child: Text('test'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.clearCookies,
child: Text('test'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.addToCache,
child: Text('test'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.listCache,
child: Text('test'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.clearCache,
child: Text('test'),
),
],
);
}
}
class NavigationControls extends StatelessWidget {
const NavigationControls({super.key, required this.webViewController});
final WebViewController webViewController;
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
IconButton(
icon: const Icon(Icons.replay),
onPressed: () => webViewController.reload(),
),
IconButton(
icon: const Icon(Icons.home_filled),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => const HomeScreen()),
);
},
),
],
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home Screen'),
),
body: const Center(
child: Text('This is the Home Screen'),
),
);
}
}
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.
flutter runon the code sampleExpected 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
```dart class BrowserPage extends StatefulWidget { const BrowserPage({Key? key}) : super(key: key); @override StateLogs
``` 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! ```https://user-images.githubusercontent.com/5601597/162562092-27863db4-38e0-48c8-afdc-e004fc2ed3f8.mp4