Skip to content

iframe consumes pointer events from widgets appearing on top #54027

New issue
New issue
Closed
Closed
iframe consumes pointer events from widgets appearing on top#54027
Assignees
ditman
Labels
P1High-priority issues at the top of the work listcustomer: junecustomer: web10e: web_canvaskitCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Webe: web_htmlHTML rendering backend for Webengineflutter/engine related. See also e: labels.found in release: 1.18Occurs in 1.18found in release: 1.22Found to occur in 1.22frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specifically

Description

@jing-pei
jing-pei
opened on Apr 5, 2020

Steps to Reproduce

// ignore: avoid_web_libraries_in_flutter
import 'dart:html';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

void main() {
  // ignore:undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory('someViewType', (int viewId) {
    final wrapper = DivElement();
    final div = IFrameElement()
        ..width = '640'
        ..height = '360'
        ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
        ..style.border = 'none';
    wrapper.append(div);
    return wrapper;
  });
 
  runApp(MaterialApp(home: HomeScreen()));
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(child: Container(color:Colors.yellow, child: RaisedButton(
      onPressed:()=>debugPrint("123123")
      ))),
      body:  SizedBox(
      width: 640,
      height: 360,
      child: HtmlWidget(),
    ),
      floatingActionButton: Builder(builder: (context) {
        return FloatingActionButton(
          child: Icon(Icons.menu, color: Colors.white),
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
        );
      }),
    );
  }
}

class HtmlWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return HtmlElementView(viewType: 'someViewType');
  }
}

class HtmlHelloWorldWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return HtmlElementView(viewType: 'hello-world-html');
  }
}

Actual results:
image

flutter doctor -v 
[✓] Flutter (Channel dev, v1.16.4-pre.50, on Mac OS X 10.15.4 19E266, locale
    zh-Hans-US)
    • Flutter version 1.16.4-pre.50 at /Users/angus/flutter
    • Framework revision d14a301e41 (4 days ago), 2020-03-31 19:14:22 -0400
    • Engine revision fc5b44c901
    • Dart version 2.8.0 (build 2.8.0-dev.18.0 e8c4aed700)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/angus/Library/Android/sdk
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.4, Build version 11E146
    • CocoaPods version 1.9.0.beta.2

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

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 44.0.2
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)

[✓] IntelliJ IDEA Ultimate Edition (version 2019.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 43.0.3
    • Dart plugin version 193.6015.53

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

[✓] Connected device (3 available)
    • macOS      • macOS      • darwin-x64     • Mac OS X 10.15.4 19E266
    • Chrome     • chrome     • web-javascript • Google Chrome 80.0.3987.149
    • Web Server • web-server • web-javascript • Flutter Tools

• No issues found!

Activity

  1. jing-pei commented on Apr 5, 2020

    @jing-pei
    jing-pei
    on Apr 5, 2020
    Author

    I need help badly

  2. jing-pei commented on Apr 5, 2020

    @jing-pei
    jing-pei
    on Apr 5, 2020
    Author

    The only solution

    // ignore: avoid_web_libraries_in_flutter
import 'dart:html';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

void main() {
  // ignore:undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory('someViewType', (int viewId) {
    final wrapper = DivElement()
      ..style.width = '100%'
      ..style.height = '100%';
    
    final div = DivElement()
      ..contentEditable = 'true'
      ..style.width = '100%'
      ..style.color = "red"
      ..style.backgroundColor = 'red'
      ..style.height = '100%';
    wrapper.append(div);
    return wrapper;
  });

  runApp(MaterialApp(home: HomeScreen()));
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
          child: Container(
              color: Colors.yellow,
              child: RaisedButton(onPressed: () => debugPrint("123123")))),
      body: SizedBox(
        width: 640,
        height: 360,
        child: HtmlWidget(),
      ),
      floatingActionButton: Builder(builder: (context) {
        return FloatingActionButton(
          child: Icon(Icons.menu, color: Colors.white),
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
        );
      }),
    );
  }
}

class HtmlWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return HtmlElementView(viewType: 'someViewType');
  }
}

  3. iapicca commented on Apr 6, 2020

    @iapicca
    iapicca
    on Apr 6, 2020

    Hi @AngusPei
    I tested with the current latest master the code from your last post

    screenshot

    logs where clean building, but got some exception running

    [ +295 ms] Debug service listening on ws://127.0.0.1:51731/e09Z_3mhTT0=
[   +1 ms] Warning: Flutter's support for web development is not stable yet and hasn't
[        ] been thoroughly tested in production environments.
[        ] For more information see https://flutter.dev/web
[        ] 🔥  To hot restart changes while running, press "r". To hot restart (and refresh the browser), press "R".
[   +1 ms] For a more detailed help message, press "h". To quit, press "q".
[+1291 ms] ══╡ EXCEPTION CAUGHT BY SERVICES LIBRARY ╞══════════════════════════════════════════════════════════

[  +11 ms] The following StateError was thrown during a platform message response callback:

[        ] Bad state: Future already completed

[   +1 ms] When the exception was thrown, this was the stack:

[        ] dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 195:49  throw_

[        ] dart-sdk/lib/async/future_impl.dart 42:79                                     complete

[        ] packages/flutter/src/services/binding.dart 177:18                             <fn>

[        ] dart-sdk/lib/async/zone.dart 1374:10                                          runUnaryGuarded

[        ] lib/_engine/engine/window.dart 331:23                                         <fn>

[        ] lib/_engine/engine/window.dart 488:17                                         <fn>

[        ] dart-sdk/lib/async/zone.dart 1439:54                                          runUnary

[        ] dart-sdk/lib/async/future_impl.dart 141:18                                    handleValue

[        ] dart-sdk/lib/async/future_impl.dart 682:44                                    handleValueCallback

[        ] dart-sdk/lib/async/future_impl.dart 711:32                                    _propagateToListeners

[   +7 ms] dart-sdk/lib/async/future_impl.dart 516:7                                     [_complete]

[        ] dart-sdk/lib/async/future.dart 315:15                                         <fn>

[        ] dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 50:19       internalCallback

[        ] ════════════════════════════════════════════════════════════════════════════════════════════════════

[+164919 ms] Application finished.
[  +54 ms] Stopped debug service on ws://127.0.0.1:51731

[  +34 ms] Failed to clean up temp directory: /var/folders/c3/l5jpznsj5k37yrj47l__xpw40000gn/T/flutter_tools.wBGvDs
[   +1 ms] "flutter run" took 216,764ms.
    [✓] Flutter (Channel master, v1.18.1-pre.15, on Mac OS X 10.15.4 19E266, locale en-EE)
    • Flutter version 1.18.1-pre.15 at /Users/nevercode/development/flutter_master
    • Framework revision 17079f26b5 (6 hours ago), 2020-04-06 01:21:01 -0400
    • Engine revision 9b8dcc7ecf
    • Dart version 2.8.0 (build 2.8.0-dev.20.0 05103dfe5a)


[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/nevercode/Library/Android/sdk
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 43.0.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] VS Code
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.9.1

[✓] Connected device (2 available)
    • Chrome     • chrome     • web-javascript • Google Chrome 80.0.3987.163
    • Web Server • web-server • web-javascript • Flutter Tools

• No issues found!

    Thank you

  4. iapicca
    added
    dependency: dartDart team may need to help us
    platform-webWeb applications specifically
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    on Apr 6, 2020

  5. jing-pei commented on Apr 6, 2020

    @jing-pei
    jing-pei
    on Apr 6, 2020
    Author

    @iapicca
    There is no problem with the current version
    image

    [✓] Flutter (Channel dev, v1.18.0, on Mac OS X 10.15.4 19E266, locale
    zh-Hans-US)
    • Flutter version 1.18.0 at /Users/angus/flutter
    • Framework revision 14f3a36aba (2 days ago), 2020-04-03 17:06:01 -0700
    • Engine revision 09bc1fc45e
    • Dart version 2.8.0 (build 2.8.0-dev.20.0 e736495eb7)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/angus/Library/Android/sdk
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.4, Build version 11E146
    • CocoaPods version 1.9.0.beta.2

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

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.0.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)

[✓] IntelliJ IDEA Ultimate Edition (version 2019.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 43.0.3
    • Dart plugin version 193.6015.53

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

[✓] Connected device (3 available)
    • macOS      • macOS      • darwin-x64     • Mac OS X 10.15.4 19E266
    • Chrome     • chrome     • web-javascript • Google Chrome 80.0.3987.149
    • Web Server • web-server • web-javascript • Flutter Tools

• No issues found!

  6. jing-pei commented on Apr 9, 2020

    @jing-pei
    jing-pei
    on Apr 9, 2020
    Author

    @iapicca 1.18.0-pre.04 DIV Click invalid

  7. yjbanov
    added this to the milestone on Apr 9, 2020
  8. yjbanov
    added
    e: web_canvaskitCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Web
    e: web_htmlHTML rendering backend for Web
    on Apr 9, 2020

  9. yjbanov commented on Apr 9, 2020

    @yjbanov
    yjbanov
    on Apr 9, 2020
    Contributor

    /cc @hterkelsen

  10. skypu3 commented on Apr 14, 2020

    @skypu3
    skypu3
    on Apr 14, 2020

    I also had similar issue on beta Flutter version 1.17.0, and also happened on newest master channel.
    The icon button can't fire any event on Stack widget with HtmlElementView

    class _BroadcastViewState extends State<BroadcastView> {
  @override
  void didChangeDependencies() {
    final IFrameElement iframeElement = IFrameElement();
    iframeElement.height = MediaQuery.of(context).size.height.toString();
    iframeElement.width = MediaQuery.of(context).size.width.toString();
    iframeElement.src =
        '/assets/index.html';
    iframeElement.style.border = 'none';
    iframeElement.id = 'iframe';
    // ignore:undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      BroadcastView.createViewId,
      (int viewId) => iframeElement,
    );
  }

  @override
  Widget build(BuildContext context) {
    return HtmlElementView(
      viewType: BroadcastView.createViewId,
    );
  }
}
    class BroadcastScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          BroadcastView(),
          Positioned.fill(
            child: Align(
              alignment: Alignment.bottomRight,
              child: RawMaterialButton(
                onPressed: () {
                  print('clicked');
                },
                child: new Icon(
                  Icons.live_tv,
                  color: Colors.white,
                  size: 25.0,
                ),
                shape: new CircleBorder(),
                elevation: 2.0,
                fillColor: Theme.of(context).primaryColor,
                padding: const EdgeInsets.all(15.0),
              ),
            ),
          )
        ],
      ),
    );
  }
}
  11. TahaTesser
    added
    engineflutter/engine related. See also e: labels.
    on May 12, 2020
  12. kf6gpe
    added
    P1High-priority issues at the top of the work list
    on May 29, 2020

  13. 38 remaining items

  14. ditman commented on Dec 10, 2020

    @ditman
    ditman
    on Dec 10, 2020
    Member

    We've just discovered a bug in the flutter web engine that will make the "clickable" property obsolete; I'll remove it from the codebase soon.

  15. ditman commented on Dec 14, 2020

    @ditman
    ditman
    on Dec 14, 2020
    Member

    A fix for the issue mentioned above has rolled to flutter master, so I have removed the "clickable" property from the widget.

    The framework should be smart enough to handle the mouse cursor properly. Remember that you can set the cursor property on your HtmlElementViews manually, if needed, like so:

    html.Element htmlElement = html.VideoElement()
  ...
  ..style.cursor = 'auto'
  ...;

  16. ditman commented on Dec 15, 2020

    @ditman
    ditman
    on Dec 15, 2020 · Hidden as outdated
  17. ditman
    self-assigned this
    on Dec 17, 2020

  18. ditman commented on Dec 17, 2020

    @ditman
    ditman
    on Dec 17, 2020
    Member

    This is now a package: https://pub.dev/packages/pointer_interceptor

    Thanks everybody for the feedback, I'm closing this issue.

  19. ditman
    closed this as completedon Dec 17, 2020

  20. DannyJoinedApps commented on Jan 11, 2021

    @DannyJoinedApps
    DannyJoinedApps
    on Jan 11, 2021

    @ditman Do you currently own a house? Can I buy you a house? Maybe a private jet? This is the best package any one has ever made for any language in any universe. Its more helpful to the world than the corona virus vaccine, it sings better than pavarotti, Darwin's book's contained less useful info and it's influence will make einstein look like an idiot.

    Seriously. It works and the bug has been making me look useless and this works, and it works, and the bug was terrible and this fixes it, and it works.

  21. ditman commented on Jan 11, 2021

    @ditman
    ditman
    on Jan 11, 2021
    Member

    LOL thanks @DannyJoinedApps, you made my day :P

  22. sivaram16 commented on Mar 11, 2021

    @sivaram16
    sivaram16
    on Mar 11, 2021

    @ditman Hi, first of all thanks for that wonderful package, I am facing some issue, I have 3 HTMLElement view in a screen, and above having DropDownButton the first issue if i wrap PointerInterceptor with dropdown its not working, and then i wrapped PointerInterceptor with child of the DropDownMenuItem there it works as excepted, so the second issue is if i have enabled only one html view its working smoothly if i have enabled all the three views, then i open the dropdown, the page got blinking continuously any idea about this ?

  23. ditman commented on Mar 11, 2021

    @ditman
    ditman
    on Mar 11, 2021
    Member

    @ThalapathySiva thanks for the kind words!

    It is hard to diagnose an issue just with a few descriptions of a sentence, but it might be related to this:

    #71888

    Can you confirm it looks similar (and follow #71888) for updates?

  24. sivaram16 commented on Mar 12, 2021

    @sivaram16
    sivaram16
    on Mar 12, 2021

    @ditman Thanks for reply, I think its kinda related to that, here i will attach mine.

    ezgif com-gif-maker (1)

    I have three HtmlElementView on single screen and I have added Pointer Interceptor for dropdownItem text so its just behaving like this even though i didn't hover my mouse. And in my console i am keep on getting "Flutter: restoring WebGL context".

  25. ditman commented on Mar 12, 2021

    @ditman
    ditman
    on Mar 12, 2021
    Member

    @ThalapathySiva a quick workaround may be to attempt to build/run your app with --web-renderer html command-line option? It may flicker less.

    The flickering that people usually report in flutter web is that HtmlElementViews "reload" (if they contain an iframe, or a text editor, or a video player or similar), not the surrounding flutter UI.

    The flickering that you're seeing here, however, looks like a new bug. If you can provide a small example app that displays the problems that you're seeing, we'd appreciate a new bug report for the platform-web canvaskit renderer. You can start reporting a new issue here!

    Thanks for reaching out!

  26. sivaram16 commented on Mar 16, 2021

    @sivaram16
    sivaram16
    on Mar 16, 2021

    @ditman Sure, can you have any idea about this issue #78294.Thank you

  27. github-actions commented on Aug 4, 2021

    @github-actions
    github-actionsBot
    on Aug 4, 2021

    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.

  28. github-actions
    locked as resolved and limited conversation to collaborators on Aug 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work listcustomer: junecustomer: web10e: web_canvaskitCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Webe: web_htmlHTML rendering backend for Webengineflutter/engine related. See also e: labels.found in release: 1.18Occurs in 1.18found in release: 1.22Found to occur in 1.22frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specifically

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions