gestureRecognizers not working on web platform

[Ortes]

• I have read the Getting Started section
• I have already searched for the same problem

Environment

Technology	Version
Flutter version	3.19.6
Plugin version	6.0.0
Android version
iOS version
macOS version
Xcode version
Google Chrome version	124.0

Description

I use the a InAppWebView in a scrolling widget to embed a web video player (vimeo but the demo is with youtube embeded player it does the same) in Web platform. But the InAppWebView does swallow vertical scroll events even with gestureRecognizers: {Factory(() => TapAndHorizontalDragGestureRecognizer())},. I looked into the web code and I do not find usage of gestureRecognizers

In the android implementation i found:

return AndroidViewSurface(
          controller: controller as AndroidViewController,
          gestureRecognizers: params.gestureRecognizers ??
              const <Factory<OneSequenceGestureRecognizer>>{},
              ...

Web implementation:

return HtmlElementView(
      viewType: 'com.pichillilorenzo/flutter_inappwebview',
      onPlatformViewCreated: (int viewId) {
        var webViewHtmlElement = WebPlatformManager.webViews[viewId]!;
        webViewHtmlElement.initialSettings = initialSettings;
        webViewHtmlElement.initialUrlRequest =
            _webPlatformParams.initialUrlRequest;
        webViewHtmlElement.initialFile = _webPlatformParams.initialFile;
        webViewHtmlElement.initialData = _webPlatformParams.initialData;
        webViewHtmlElement.headlessWebViewId =
            _webPlatformParams.headlessWebView?.isRunning() ?? false
                ? _webPlatformParams.headlessWebView?.id
                : null;
        webViewHtmlElement.prepare();
        if (webViewHtmlElement.headlessWebViewId == null) {
          webViewHtmlElement.makeInitialLoad();
        }
        _onPlatformViewCreated(viewId);
      },
    );

Expected behavior:
gestureRecognizers or disableVerticalScroll to be effective and prevent vertical scrolling

Current behavior:

Steps to reproduce

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              color: Colors.blue,
              width: double.infinity,
              height: 600,
            ),
            SizedBox(
              height: 200,
              child: InAppWebView(
                initialSettings:InAppWebViewSettings(
                  disableVerticalScroll: false,
                ),
                initialData: InAppWebViewInitialData(
                  data:
                      '<iframe height="200" src="https://www.youtube.com/embed/6Dh-RL__uN4" frameborder="0" allowfullscreen></iframe>',
                ),
                gestureRecognizers: {Factory(() => TapAndHorizontalDragGestureRecognizer())},
              ),
            ),
            Container(
              color: Colors.red,
              width: double.infinity,
              height: 600,
            ),
          ],
        ),
      ),
    );
  }
}

In this example you can scroll by draging or scroll with mouse wheel on the blue or red panel but not the webview space

[github-actions]

👋 @Ortes

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

[roger-mdisrupt]

Seeing the same problem. On web only, if I have an app-bar with popup menu over the top of the inappwevview, I cannot select anything in the menu which overlaps it.