8000 Flutter Web embed mode not scrolling the hosting page · Issue #157435 · flutter/flutter · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Flutter Web embed mode not scrolling the hosting page #157435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
marcelpinto opened this issue Oct 23, 2024 · 13 comments
Open

Flutter Web embed mode not scrolling the hosting page #157435

marcelpinto opened this issue Oct 23, 2024 · 13 comments
Labels
found in release: 3.24 Found to occur in 3.24 found in release: 3.27 Found to occur in 3.27 has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list platform-web Web applications specifically team-web Owned by Web platform team triaged-web Triaged by Web platform team

Comments

@marcelpinto
Copy link
marcelpinto commented Oct 23, 2024 •
edited
Loading

As reported in other issues, when we embed a flutter view inside another page, either using an iframe or multi-embedding view, the touch scrolling (mainly Android/iOS browsers) is not scrolling the host page

In a recent fix it was mention that this will be a follow-up but I could not find an issue for it:

Scrolling using the mouse and the touchpad has landed, which was in the MVP of the feature. Touch-based scrolling can be addressed as a follow-up.

Originally posted by @yjbanov in #139263 (comment)

Expected behavior:
If a user drags up/down inside a non-scrollable flutter view/widget the host page scrolls.

This is a major blocker to use Flutter view-embedding.

HTML example:

  <div style="display: flex; flex-direction: column; background-color: #F7F7F7; overflow-y: auto;">
    <header
      style="height: 150px; background-color: rgb(63, 50, 50); color: white; display: flex; align-items: center; justify-content: center;">
      <h2>Main header title</h2>
    </header>
    <div id="flutter-host"></div>
    <footer style="height: 300px; background-color: black; color: white; display: flex; align-items: center; justify-content: center;">
        <p>Some flutter content</p>
    </footer>
  </div>

flutter_bootstrap.js

_flutter.loader.load({
  onEntrypointLoaded: async function(engineInitializer) {
    let engine = await engineInitializer.initializeEngine({
      multiViewEnabled: true, // Enables embedded mode.
    });
    window.flutterApp = await engine.runApp();
    
    const hostElement = document.querySelector('#flutter-host');
    if (hostElement) {
        window.viewId = flutterApp.addView({
            hostElement: hostElement,
            viewConstraints: {
                minHeight: 300,
                maxHeight: Infinity,
            }
        });
        console.log("View added");
    }
  }
});

The Flutter app is then a normal flutter app with a fix size (e.g 500px height).

You can see on the attached video, how the touch in the header or footer works, but not inside the flutter-view. At the end of the video, you can also see how the mouse-wheel scroll works regardless of where it is hoovered.

flutter-web-not-scrolling-on-touch.mov
@marcelpinto
Copy link
Author

@yjbanov it would be great to get an update on this based on your previous comment

@darshankawar darshankawar added the in triage Presently being triaged by the triage team label Oct 24, 2024
@darshankawar
Copy link
Member

Thanks for the report. Seeing the same behavior as reported with provided code sample on latest versions.

stable : 3.24.3
master : 3.27.0-1.0.pre.181

@darshankawar darshankawar added platform-web Web applications specifically has reproducible steps The issue has been confirmed reproducible and is ready to work on team-web Owned by Web platform team found in release: 3.24 Found to occur in 3.24 found in release: 3.27 Found to occur in 3.27 and removed in triage Presently being triaged by the triage team labels Oct 24, 2024
@ditman
Copy link
Member
ditman commented Nov 6, 2024 •
edited
Loading

Touch is tricky. There's a similar problem with Google Maps:

https://developers.google.com/maps/documentation/javascript/examples/interaction-cooperative

We might be able to disable touch events when the framework says it doesn't want them, and then re-enable them after, but the current implementation of the engine (and the browser, btw) doesn't let us understand gestures (like drag).

@yjbanov yjbanov added P2 Important issues not at the top of the work list triaged-web Triaged by Web platform team labels Nov 13, 2024
@adamkoch
Copy link < 8000 /clipboard-copy>

Wondering if anyone who has more expertise in this area has any ideas for hacks/workarounds to make this work (or at least be usable) in the meantime?

Maybe using the js bridge to pass scroll events from flutter to a listener on containing page?

@lsuhov

This comment has been minimized.

Sign in to view
@marcelpinto

This comment has been minimized.

Sign in to view
@sudha-anecure

This comment has been minimized.

Sign in to view
@dowski

This comment has been minimized.

Sign in to view
@dowski
Copy link
dowski commented Jan 15, 2025

@adamkoch re: a workaround, thanks to chatting with claude.ai I just found that using the following CSS works around my particular issue:

#flutter-element {
    pointer-events: none;
  }

In my case the Flutter element in question is being used just for rendering and isn't meant to be interacted with via touch. That's likely not a common use case though, so YMMV.

@adamkoch
Copy link

Thanks for the pointer (hah) @dowski. I actually got the same suggestion from Claude. This does fix the scrolling behaviour, however, it means the flutter components also stop receiving any touch events themselves. Sounds like that may work for your use-case but I still need all the flutter widgets to work as usual :(

@Hamza3620

This comment has been minimized.

Sign in to view
@rmasarovic
Copy link

Hi, I know this has come up quite a few times already, but I really think it's time to take another look at the issues with iframes and scrolling—and maybe consider giving them higher priority. These aren’t just small bugs—they seriously affect monetization for Flutter web apps. For example, using Google Ads means losing key events like ad clicks or even basic scrolling in app. And third-party payment banks form just don’t work reliably. It’s tough having to explain that we’ve built a great flutter cross-platform app, but can’t monetize it properly. Hopefully this can be looked at with fresh eyes—it’s a real blocker for many of us trying to ship solid web apps.

@alejojarahi
Copy link

What's the status of this issue? Being able to interoperate Flutter with an existing website is very important in my organization, and we're encountering this scenario that limits this implementation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
found in release: 3.24 Found to occur in 3.24 found in release: 3.27 Found to occur in 3.27 has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list platform-web Web applications specifically team-web Owned by Web platform team triaged-web Triaged by Web platform team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
0