Pinch in the video player breaks the page.

[darkstarx]

Steps to Reproduce

Create the page with the html body inside, which contains some video in the iFrame tag. Launch the app on the web platform. Move the cursor inside the iFrame video player. Try to scroll (scrolling the page doesn't work, but it should). Try to pinch in (the page scale and offset should stay the same, but they change so the page become unreadable).

HTML

```html

Some title

Some text and the image

 

Some bold text and the link here in the text.

And video at the end

```

`HtmlWidget` configuration

```dart HtmlWidget(html) ```

Testing environment

`flutter_widget_from_html: ^0.14.6` ``` [✓] Flutter (Channel stable, 3.13.6, on macOS 14.0 23A344 darwin-x64, locale ru-RU) • Flutter version 3.13.6 on channel stable at /opt/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision ead455963c (7 weeks ago), 2023-09-26 18:28:17 -0700 • Engine revision a794cf2681 • Dart version 3.1.3 • DevTools version 2.25.0 [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1) • Android SDK at /Users/sergey/Library/Android/sdk • Platform android-33, build-tools 33.0.1 • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.0) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 15A240d • CocoaPods version 1.13.0 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.3) • 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 17.0.6+0-17.0.6b829.9-10027231) [✓] VS Code (version 1.68.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.60.0 [✓] Connected device (3 available) • iPhone SE (3rd generation) (mobile) • B11CAE6D-E20D-4417-87E7-D231BE2AC612 • ios • com.apple.CoreSimulator.SimRuntime.iOS-17-0 (simulator) • macOS (desktop) • macos • darwin-x64 • macOS 14.0 23A344 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 119.0.6045.123 [✓] Network resources • All expected network resources are available. • No issues found! ```

Expected results

It seems you should ignore scroll and pinch gestures in the iFrame widget so they propagate to the parent widget which should be the scroll view where the HtmlWidget widget is placed.

Actual results

The original page (note that the iFrame with the video player in the HtmlWidget takes the all page width, but the iFrame tag contains explicitly set width, that's the first bug).

The page after pitching the iFrame in (The view frame became smaller than the page size, note the scrollbar actual position, it should be sticked to the right edge of the page).

[daohoangson]

I think this may be a bug in the way native DOM element is rendered within a Flutter app. Can you deploy a web demo for this?

[darkstarx]

I think this may be a bug in the way native DOM element is rendered within a Flutter app. Can you deploy a web demo for this?

I'm not sure I correctly understood you. Why do you ask me to deploy something? The easiest way to reproduce the bug is to create a new flutter web application (flutter create --template=app --platforms=web test_app), plug in the package flutter_widget_from_html to the newly created project in the pubspec.yaml and then insert the widget HtmlWidget in the widget tree with the specified body. That's it.

[daohoangson]

The scrolling issue is expected, the current workaround is mentioned here https://github.com/flutter/flutter/issues/68903#issuecomment-747811526. We cannot use the interceptor because user should be able to interact with the webpage inside the iframe.

The zoom issue appears to be a Flutter bug, I have deployed a minimal example at https://flutter-iframe-element-bug.vercel.app/ and created a bug report https://github.com/flutter/flutter/issues/138815.

[darkstarx]

Ah, I see, that's not a particularly inspiring situation. Anyway, thank you for your explanation. So, there is no any way to intercept only scrolling events? And what about the size of iFrame? At the moment they take all the page width despite of the explicitly specified size in the html.

[daohoangson]

So, there is no any way to intercept only scrolling events?

It appears so. According to the source code, it overlays a blanket on top of the target widget to block everything. There is no configuration to filter which event is blocked or not.

And what about the size of iFrame? At the moment they take all the page width despite of the explicitly specified size in the html.

This sounds like a bug, I have created #1109 to track this.

[darkstarx]

All right, thank you very much!