webview_flutter: Nested scrolling with WebView no longer works

Internal: b/159169562

Steps to Reproduce

Place WebView inside ConstrainedBox (to give WebView a fixed height) inside ListView. Add required gestureRecognizers (to win vertical scroll).
Run app
Cannot scroll vertically

This seems to be a regression as the scrolling doesn't work on master but if I pick an arbitrary older Flutter version from May 2019 (using git checkout 34325ba33a05a6a0af07e1813377703e8a6e328e) or use flutter channel stable scrolling works perfectly.

Sample app (with dependency on webview_flutter: ^0.3.9+1):

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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: WebViewSample(),
      ),
    );
  }
}

class WebViewSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ConstrainedBox(
          constraints: BoxConstraints(maxHeight: 200.0),
          child: WebView(
            gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
              Factory<VerticalDragGestureRecognizer>(
                () => VerticalDragGestureRecognizer(),
              ),
            },
            initialUrl: Uri.dataFromString(
              '<p>Web view sample</p>' * 1000,
            ).toString(),
          ),
        )
      ],
    );
  }
}

Logs

[   +4 ms] 🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
[   +1 ms] An Observatory debugger and profiler on Android SDK built for x86 is available at: http://127.0.0.1:65463/PepkWGgfEXQ=/
[        ] For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".
[  +22 ms] W/cr_ChildProcLH( 7466): Create a new ChildConnectionAllocator with package name = com.android.chrome, sandboxed = true
[  +10 ms] I/cr_BrowserStartup( 7466): Initializing chromium process, singleProcess=false
[ +344 ms] W/le.webview_tes( 7466): Accessing hidden method
Landroid/view/textclassifier/logging/SmartSelectionEventTracker;-><init>(Landroid/content/Context;I)V (light greylist, reflection)
[        ] W/le.webview_tes( 7466): Accessing hidden method
Landroid/view/textclassifier/logging/SmartSelectionEventTracker;->logEvent(Landroid/view/textclassifier/logging/SmartSelectionEventTracker$Se
lectionEvent;)V (light greylist, reflection)
[        ] W/le.webview_tes( 7466): Accessing hidden method
Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionStarted(I)Landroid/view/textclassifier/logging/Smar
tSelectionEventTracker$SelectionEvent; (light greylist, reflection)
[        ] W/le.webview_tes( 7466): Accessing hidden method
Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionModified(II)Landroid/view/textclassifier/logging/Sm
artSelectionEventTracker$SelectionEvent; (light greylist, reflection)
[        ] W/le.webview_tes( 7466): Accessing hidden method
Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionModified(IILandroid/view/textclassifier/TextClassif
ication;)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)
[        ] W/le.webview_tes( 7466): Accessing hidden method
Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionModified(IILandroid/view/textclassifier/TextSelecti
on;)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)
[        ] W/le.webview_tes( 7466): Accessing hidden method
Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionAction(III)Landroid/view/textclassifier/logging/Sma
rtSelectionEventTracker$SelectionEvent; (light greylist, reflection)
[        ] W/le.webview_tes( 7466): Accessing hidden method
Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionAction(IIILandroid/view/textclassifier/TextClassifi
cation;)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (light greylist, reflection)
[  +50 ms] W/cr_media( 7466): Requires BLUETOOTH permission
[ +106 ms] D/        ( 7466): HostConnection::get() New Host Connection established 0xba20eb00, tid 7558
[        ] D/EGL_emulation( 7466): eglCreateContext: 0xce211da0: maj 3 min 0 rcv 3
[        ] D/EGL_emulation( 7466): eglMakeCurrent: 0xce211da0: ver 3 0 (tinfo 0xbab60d90)
[ +230 ms] D/EGL_emulation( 7466): eglMakeCurrent: 0xe2b05e40: ver 3 0 (tinfo 0xca840df0)
[        ] D/EGL_emulation( 7466): eglMakeCurrent: 0xe2b05e40: ver 3 0 (tinfo 0xca840df0)
[   +2 ms] W/cr_CrashFileManager( 7466): /data/user/0/com.example.webview_test/cache/WebView/Crash Reports does not exist or is not a
directory
[  +15 ms] W/VideoCapabilities( 7466): Unrecognized profile 4 for video/hevc
[  +35 ms] I/VideoCapabilities( 7466): Unsupported profile 4 for video/mp4v-es
[  +11 ms] W/cr_MediaCodecUtil( 7466): HW encoder for video/avc is not available on this device.
[ +350 ms] D/EGL_emulation( 7466): eglCreateContext: 0xb9f5f840: maj 3 min 0 rcv 3
[        ] D/EGL_emulation( 7466): eglMakeCurrent: 0xb9f5f840: ver 3 0 (tinfo 0xbab60d90)
[  +68 ms] D/EGL_emulation( 7466): eglMakeCurrent: 0xe2b05e40: ver 3 0 (tinfo 0xca840df0)

Analyzing webview_test...
No issues found! (ran in 3.5s)

flutter doctor -v
[✓] Flutter (Channel master, v1.7.12-pre.42, on Mac OS X 10.14.5 18F132, locale en-US)
    • Flutter version 1.7.12-pre.42 at /Users/droidery/flutter
    • Framework revision 9e1b4b22c2 (2 hours ago), 2019-06-30 22:40:09 -0700
    • Engine revision e96900df2f
    • Dart version 2.4.0


[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/droidery/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 10.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.2.1, Build version 10E1001
    • CocoaPods version 1.7.3

[!] iOS tools - develop for iOS devices
    ✗ Verify that all connected devices have been paired with this computer in Xcode.
      If all devices have been paired, libimobiledevice and ideviceinstaller may require updating.
      To update with Brew, run:
        brew update
        brew uninstall --ignore-dependencies libimobiledevice
        brew uninstall --ignore-dependencies usbmuxd
        brew install --HEAD usbmuxd
        brew unlink usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    • ios-deploy 1.9.4

[✗] Chrome - develop for the web (Cannot find chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! CHROME_EXECUTABLE not set

[✓] Android Studio (version 3.4)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 36.1.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

[✓] IntelliJ IDEA Community Edition (version 2019.1.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 36.1.4
    • Dart plugin version 191.7830

[!] VS Code (version 1.35.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (3 available)
    • Android SDK built for x86 • emulator-5554 • android-x86    • Android 9 (API 28) (emulator)
    • macOS                     • macOS         • darwin-x64     • Mac OS X 10.14.5
    • Chrome                    • chrome        • web-javascript • unknown (unsupported)

! Doctor found issues in 3 categories.

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

@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.

@Hixie

Hi @Hixie
I believe those issues
#41457
#41592
might be duplicate of this one,
is that correct?

@ludwiktrammer

I have been working on some higher priority thing and I have to pushed the milestone further. Thanks @ludwiktrammer for posting the workaround.

@cyanglaz

@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:
1- Use 2 fingers to pinch on the webview portion, as if you're zooming in/out (zoom doesn't work on Android so it will not react).
2- tap on the dropdown button while you are still pinching with 2 fingers on the webview.

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.

@KhatibFX

@KhatibFX Ah this is an android issue? I think this original issue is about iOS. I have moved this your particular crash issue into a different Github issue to track separately. #60921

@cyanglaz

@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.

@dkwingsmt

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 1.20.0-7.1.pre.

flutter doctor -v

[✓] Flutter (Channel dev, 1.20.0-7.1.pre, on Mac OS X 10.15.5 19F101,
    locale en-AO)
    • Flutter version 1.20.0-7.1.pre at
      /Users/pedro/dev/SDKs/flutter_dev
    • Framework revision 7736f3bc90 (4 days ago), 2020-07-10 16:33:05
      -0700
    • Engine revision d48085141c
    • Dart version 2.9.0 (build 2.9.0-21.2.beta)

 
[✓] Android toolchain - develop for Android devices (Android SDK version
    30.0.0)
    • Android SDK at /Users/pedro/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Users/pedro/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6514223/Andr
      oid Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Applications/Google
      Chrome.app/Contents/MacOS/google-chrome-unsafe

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] Android Studio (version 4.0)
    • Android Studio at /Users/pedro/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6514223/Andr
      oid Studio.app/Contents
    • Flutter plugin version 47.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (4 available)
    • AOSP on IA Emulator (mobile) • emulator-5554 • android-x86    •
      Android 9 (API 28) (emulator)
    • macOS (desktop)              • macos         • darwin-x64     •
      Mac OS X 10.15.5 19F101
    • Web Server (web)             • web-server    • web-javascript •
      Flutter Tools
    • Chrome (web)                 • chrome        • web-javascript •
      Google Chrome 83.0.4103.116

• No issues found!

@cyanglaz

Update: @cyanglaz is actively working on this and expects a PR to be ready later this week.

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 doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

webview_flutter: Nested scrolling with WebView no longer works #35394

Steps to Reproduce

Logs

38 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

webview_flutter: Nested scrolling with WebView no longer works #35394

Description

Steps to Reproduce

Logs

Activity

caifan-uncle commented on Sep 26, 2019

ludwiktrammer commented on Sep 27, 2019

caifan-uncle commented on Oct 5, 2019

iapicca commented on Nov 6, 2019

cyanglaz commented on Nov 13, 2019

38 remaining items

KhatibFX commented on Jul 6, 2020

cyanglaz commented on Jul 6, 2020

KhatibFX commented on Jul 6, 2020

blasten commented on Jul 7, 2020

pedromassangocode commented on Jul 14, 2020

Hixie commented on Jul 14, 2020

github-actions commented on Aug 18, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions