Scroll not working if mouse is over a iframe video in Flutter Web

[samiissa]

I'm developing a Flutter web app and I need to show a html with tags. This html is created in a Django back office.

The html is loaded successfully but when I need to scroll down the screen, if the mouse cursor is over the iframe video, the scroll doesn't work.

Steps to Reproduce

HTML

<figure class=\"media\"><iframe src=\"https://www.youtube.com/embed/bZu1tTup3R4\"></iframe></figure>

`HtmlWidget` configuration

HtmlWidget(
   cubit.blog.val.body,
   renderMode: RenderMode.column,
   factoryBuilder: () => WidgetFactory(),
)

Tesing environment

[✓] Flutter (Channel stable, 3.24.5, on macOS 14.6.1 23G93 darwin-arm64, locale en-ES)
    • Flutter version 3.24.5 on channel stable at /Users/macdelivery/fvm/versions/3.24.5
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision dec2ee5c1f (5 weeks ago), 2024-11-13 11:13:06 -0800
    • Engine revision a18df97ca5
    • Dart version 3.5.4
    • DevTools version 2.37.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/macdelivery/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/macdelivery/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)

[✓] VS Code (version 1.96.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (4 available)
    • iPhone del Tamudazo (mobile)    • 00008030-001A49942680802E • ios            • iOS 18.1.1 22B91
    • macOS (desktop)                 • macos                     • darwin-arm64   • macOS 14.6.1 23G93 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin         • macOS 14.6.1 23G93 darwin-arm64
    • Chrome (web)                    • chrome                    • web-javascript • Google Chrome 131.0.6778.140

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Expected results

Can scroll when cursor is over the iframe video section

Actual results

Mouse scrolling not working. You have to put the mouse cursor outside the iframe video area.

[daohoangson]

It's possible to customize the gesture recognizer for the webview to ignore scrolling -> the list view will be able to capture that gesture and continue scrolling. However, doing this will effectively disable scrolling inside the webview. Is this your desired behavior?

[samiissa]

Hello!! Sorry for the delay.

Well, I would need it to work whether the cursor is over the video or the rest of the html loaded on the webview. Do you have any suggestion?

Let me show you where is the HtmlWidget where I load the html content:

                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Padding(
                              padding: EdgeInsets.all(
                                deviceSize.isMobileSize ? Sizes.p20 : Sizes.p40,
                              ),
                              child: HtmlWidget(
                                event.description,
                                onTapUrl: (url) => launchUrl(Uri.parse(url)),
                                renderMode: RenderMode.column,
                                factoryBuilder: () => WidgetFactory(),
                              ),
                            ), 
                            ... // more widgets
                            ])

Thanks for your great job!!!