webview_flutter: Nested scrolling with WebView no longer works #35394
Comments
droidery
changed the title
cyanglaz
added
a: platform-views
|
Have you managed to solve this? My startup is on the verge of bankruptcy because of this issue. Hahaha. |
|
@zonghangoh Oh, boy. Check out the workaround posted in #36304. I think it will also work here. |
|
@ludwiktrammer sir i would like to personally thank you for saving my startup from collapsing. it worked! have erected a statue in your honour at the entrance of our office. |
|
I have been working on some higher priority thing and I have to pushed the milestone further. Thanks @ludwiktrammer for posting the workaround. |
|
After bisecting, the regression is probably caused in #31935 |
|
My apology for the inconvenience. PR #31935 introduced a change so that recognizers will not be effective unless they have any qualifyied callbacks. Therefore the temporary solution is to add any dummy callback, such as Factory<VerticalDragGestureRecognizer>(
() => VerticalDragGestureRecognizer()..onUpdate = (_) {},
),This change was introduced because gestures started to support different pointer buttons, but we didn't want recognizers to join the competition they don't listen to (e.g. don't join the competition for LMB events unless you have LMB callbacks). I didn't expect that the recognizer would want to be effective here even without any callbacks. I'll continue looking into |
|
@dkwingsmt Thanks for the quick turn around! Does this only affect to a |
|
@cyanglaz It affects all recognizers. In fact |
|
Since there is a workaround and it is fairly straight forward to apply. I'm going to lower the priority of this issue. Setting the milestone to goal |
|
The workaround causes the webview to crash with the following error when tapping on a DropdownButton while using 2 finger gesture inside the webview: |
VladyslavBondarenko
added
the
framework
|
customer:money is affected by this and one of their feature releases is blocked. |
|
/cc @bparrishMines Is this on your radar? Or is there anybody in the plugin universe that could take a look at this P2 issue? |
|
@goderbauer This in on my radar. |
|
@cyanglaz Do we have a proposal for a solution here? customer:money is asking if we can fix this by mid-July. Judging by the history of the issue, I find that unlikely to happen. Is it because we are short on resources or is it because we are not sure what the solution should be. They volunteered to work with us on it. Comment on b/159169562 if interested. |
|
Hi @KhatibFX, do you mind sharing more details of this crash? If you can provide a reduced test case with a steps to reproduce, that'd be great! |
|
@cyanglaz Not at all, here is a minimal reproducing code: import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('First Route'),
),
body: ListView(
children: <Widget>[
SizedBox(
height: 500,
child: WebView(
initialUrl: 'https://flutter.io',
javascriptMode: JavascriptMode.unrestricted,
gestureRecognizers: {
Factory<PlatformViewVerticalGestureRecognizer>(
() => PlatformViewVerticalGestureRecognizer()
..onUpdate = (_) {},
),
},
),
),
DropdownButton(
items: [
DropdownMenuItem(
child: Text('first'),
),
DropdownMenuItem(
child: Text('second'),
)
],
onChanged: (value) {},
)
],
),
),
);
}
}
class PlatformViewVerticalGestureRecognizer
extends VerticalDragGestureRecognizer {
PlatformViewVerticalGestureRecognizer({PointerDeviceKind kind})
: super(kind: kind);
Offset _dragDistance = Offset.zero;
@override
void addPointer(PointerEvent event) {
startTrackingPointer(event.pointer);
}
@override
void handleEvent(PointerEvent event) {
_dragDistance = _dragDistance + event.delta;
if (event is PointerMoveEvent) {
final double dy = _dragDistance.dy.abs();
final double dx = _dragDistance.dx.abs();
if (dy > dx && dy > kTouchSlop) {
// vertical drag - accept
resolve(GestureDisposition.accepted);
_dragDistance = Offset.zero;
} else if (dx > kTouchSlop && dx > dy) {
resolve(GestureDisposition.accepted);
// horizontal drag - stop tracking
stopTrackingPointer(event.pointer);
_dragDistance = Offset.zero;
}
}
}
@override
String get debugDescription => 'horizontal drag (platform view)';
@override
void didStopTrackingLastPointer(int pointer) {}
}
Reproduction steps: Flutter doctor output: Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v1.17.0-3.2.pre, on Mac OS X 10.15.3 19D76, locale en-AE)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.6)
[✓] Connected device (3 available)
• No issues found!
Pubspec.yaml: name: flutterapp
description: A new Flutter application.
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# Webview for openlayers
webview_flutter: ^0.3.19+9
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.3
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
Tested on OnePlus 5T, Android 8.1 If I missed anything, please let me know, thanks. |
|
@cyanglaz I haven't tested this on a physical iOS device, since I don't have one. If my issue doesn't reproduce on iOS, then that's good. |
|
To clarify, this issue was introduced in #31935. The workaround from @dkwingsmt is #35394 (comment), but it doesn't solve the issue because it makes the app crash on Android (Issue #60921). cc @bparrishMines since you touched these files recently. |
|
This is reproducible on flutter doctor -v |
|
Update: @cyanglaz is actively working on this and expects a PR to be ready later this week. |
pedromassangocode
added
the
has reproducible steps
|
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of |
flutter-triage-bot
bot
added
P0
flutter-triage-bot
bot
added
the
package
Internal: b/159169562
Steps to Reproduce
WebViewinsideConstrainedBox(to giveWebViewa fixed height) insideListView. Add requiredgestureRecognizers(to win vertical scroll).This seems to be a regression as the scrolling doesn't work on
masterbut if I pick an arbitrary older Flutter version from May 2019 (usinggit checkout 34325ba33a05a6a0af07e1813377703e8a6e328e) or useflutter channel stablescrolling works perfectly.Sample app (with dependency on
webview_flutter: ^0.3.9+1):Logs
The text was updated successfully, but these errors were encountered: