[web?] HtmlElementView repainting with some interactions (Iframe reloading)

[ditman]

This has been reported earlier, but I thought I'd try to produce the simplest flutter app that'd reproduce this (no MaterialApp, Scaffolding or anything).

Steps to Reproduce

Expand this for a main.dart that can be used on top of the default app's one:

// ignore: avoid_web_libraries_in_flutter
import 'dart:html' as html;
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

const String _htmlElementViewType = '_htmlElementViewType';

void main() {
  // ignore: undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory(_htmlElementViewType,
      (int viewId) {
    final html.Element wrapper = html.DivElement();
    final html.Element htmlElement = html.IFrameElement()
      ..width = '100%'
      ..height = '100%'
      ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
      ..style.border = 'none';
    wrapper.append(htmlElement);
    return wrapper;
  });

  runApp(MyApp());
}

/// Main app
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start, // Do not center contents
        children: <Widget>[
          Container(
            color: Colors.pink, // Makes the repaint very obvious
            width: 320, // (Optional) just to see it's not a 100% width issue
            height: 240,
            child: Stack(
              children: <Widget>[
                HtmlElementView(
                  viewType: _htmlElementViewType,
                ), // *** Must come before the rest...
                for (var i = 1; i <= 5; i++) Container( // *** i >= 5
                  color: Colors.transparent, // *** any color will do
                  child: RaisedButton( // *** not sure if other widgets trigger this
                    onPressed: () {},
                  )
                ),
              ],
            ),
          ),
          Text('Resize the screen to repaint iframe'), // *** Part of the bug too
          // (Optional) Much easier to hover than into any of the buttons within the stack
          RaisedButton(
            child: const Text('Hover/click me to repaint iframe'),
              onPressed: () {},
          ),
        ],
      )
    );
  }
}

Or click here to see a deployed version.

Note that in the code above there are comments that start with ***. Those mean that those lines are needed for the bug to reproduce. If removed/changed, the bug might not show up.

Expected results:

Since the app is stateless, and there's no code on it whatsoever to repaint anything; I'd expect the iframe to not reload when moving the mouse around, or resizing the window.

Actual results:

The iframe reloads (flashes pink, then the video shows again) when:

• Hovering the mouse over the last button
• Resizing the screen
• Hovering the mouse (entering from the left) on the empty buttons on top of the Youtube embed iframe.
  

Logs

$ flutter run -d chrome --verbose
[  +53 ms] executing: [/usr/local/google/home/dit/github/flutter/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[  +29 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[        ] e6bd95bc5caa5e34c5b0285a559673984374b7ea
[        ] executing: [/usr/local/google/home/dit/github/flutter/] git tag --points-at e6bd95bc5caa5e34c5b0285a559673984374b7ea
[  +10 ms] Exit code 0 from: git tag --points-at e6bd95bc5caa5e34c5b0285a559673984374b7ea
[   +1 ms] executing: [/usr/local/google/home/dit/github/flutter/] git describe --match *.*.* --long --tags e6bd95bc5caa5e34c5b0285a559673984374b7ea
[  +11 ms] Exit code 0 from: git describe --match *.*.* --long --tags e6bd95bc5caa5e34c5b0285a559673984374b7ea
[        ] 1.24.0-7.0.pre-356-ge6bd95bc5c
[  +43 ms] executing: [/usr/local/google/home/dit/github/flutter/] git rev-parse --abbrev-ref --symbolic @{u}
[   +3 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{u}
[        ] origin/master
[        ] executing: [/usr/local/google/home/dit/github/flutter/] git ls-remote --get-url origin
[   +2 ms] Exit code 0 from: git ls-remote --get-url origin
[        ] [email protected]:ditman/flutter.git
[  +40 ms] executing: [/usr/local/google/home/dit/github/flutter/] git rev-parse --abbrev-ref HEAD
[   +4 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[        ] master
[  +33 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[   +1 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +38 ms] executing: /usr/local/google/home/dit/Android/Sdk/platform-tools/adb devices -l
[  +10 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +74 ms] executing: /usr/local/google/home/dit/Android/Sdk/platform-tools/adb devices -l
[  +19 ms] Skipping pub get: version match.
[  +89 ms] Generating /usr/local/google/home/dit/github/repro-cases/iframe_refresh/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistrant.java
[  +45 ms] List of devices attached
[   +1 ms] List of devices attached
[  +59 ms] Launching lib/main.dart on Chrome in debug mode...
[  +94 ms] Updating assets
[  +70 ms] Waiting for connection from debug service on Chrome...
[  +87 ms] <- reset
[   +7 ms] /usr/local/google/home/dit/github/flutter/bin/cache/dart-sdk/bin/dart --disable-dart-dev
/usr/local/google/home/dit/github/flutter/bin/cache/artifacts/engine/linux-x64/frontend_server.dart.snapshot --sdk-root
/usr/local/google/home/dit/github/flutter/bin/cache/flutter_web_sdk/ --incremental --target=dartdevc --debugger-module-names --experimental-emit-debug-metadata
-Ddart.developer.causal_async_stacks=true --output-dill /tmp/flutter_tools.LWULJR/flutter_tool.TWHYKC/app.dill --libraries-spec
file:https:///usr/local/google/home/dit/github/flutter/bin/cache/flutter_web_sdk/libraries.json --packages
/usr/local/google/home/dit/github/repro-cases/iframe_refresh/.dart_tool/package_config.json -Ddart.vm.profile=false -Ddart.vm.product=false --enable-asserts
--track-widget-creation --filesystem-root /tmp/flutter_tools.LWULJR/flutter_tools.VDPEIK --filesystem-scheme org-dartlang-app --initialize-from-dill
build/fbbe6a61fb7a1de317d381f8df4814e5.cache.dill.track.dill --platform
file:https:///usr/local/google/home/dit/github/flutter/bin/cache/flutter_web_sdk/kernel/flutter_ddc_sdk.dill --no-sound-null-safety
[   +9 ms] <- compile org-dartlang-app:/web_entrypoint.dart
[+13489 ms] Waiting for connection from debug service on Chrome... (completed in 13.6s)
[        ] Synced 28.5MB.
[        ] <- accept
[        ] Caching compiled dill
[  +64 ms] Using Google Chrome 87.0.4280.88 

[+1030 ms] [CHROME]:[2585724:2585724:1207/171313.731932:ERROR:sandbox_linux.cc(374)] InitializeSandbox() called with multiple threads in process gpu-process.
[  +78 ms] [CHROME]:
[        ] [CHROME]:DevTools listening on ws:https://127.0.0.1:38441/devtools/browser/292e5742-dd7e-4f5e-b5d4-b0af7030a411
[ +449 ms] DwdsInjector: Received request for entrypoint at http:https://localhost:38455/main_module.bootstrap.js
[   +3 ms] MetadataProvider: Loading debug metadata...
[  +20 ms] MetadataProvider: Loaded debug metadata
[   +5 ms] DwdsInjector: Injected debugging metadata for entrypoint at http:https://localhost:38455/main_module.bootstrap.js
[+1651 ms] DevHandler: Debug service listening on ws:https://127.0.0.1:43017/bJKMnPMAMS0=/ws

[   +5 ms] Debug service listening on ws:https://127.0.0.1:43017/bJKMnPMAMS0=/ws
[        ] Running with unsound null safety
[        ] For more information see https://dart.dev/null-safety/unsound-null-safety
[   +2 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" or "R".
[        ] For a more detailed help message, press "h". To quit, press "q".

$ flutter analyze
Analyzing iframe_refresh...                                             

  error • The name 'platformViewRegistry' is being referenced through the prefix 'ui', but it isn't defined in any of the libraries imported using that prefix •
         lib/main.dart:10:6 • undefined_prefixed_name

1 issue found. (ran in 1.2s)

$ flutter doctor -v
[✓] Flutter (Channel master, 1.24.0-8.0.pre.356, on Linux, locale en_US.UTF-8)
    • Flutter version 1.24.0-8.0.pre.356 at /usr/local/google/home/dit/github/flutter
    • Framework revision e6bd95bc5c (2 weeks ago), 2020-11-23 14:10:58 -0800
    • Engine revision 23a8e027db
    • Dart version 2.12.0 (build 2.12.0-62.0.dev)

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] VS Code (version 1.51.1)
    • VS Code at /usr/share/code
    • Flutter extension version 3.17.0

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

[pedromassangocode]

Reproducible on latest master channel.

Note: running with Canvas-Kit the issue does not reproduce by hovering the button but still reproduces by resizing the webpage.

flutter doctor -v

[✓] Flutter (Channel master, 1.25.0-5.0.pre.108, on Mac OS X 10.15.7 19H2 darwin-x64, locale en)
    • Flutter version 1.25.0-5.0.pre.108 at /Users/pedromassango/dev/SDKs/flutter_master
    • Framework revision 995aa138cd (5 hours ago), 2020-12-08 09:18:02 +0530
    • Engine revision b0d31ae166
    • Dart version 2.12.0 (build 2.12.0-125.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.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_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.1, Build version 12A7403
    • CocoaPods version 1.9.3

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

[✓] Android Studio (version 4.1)
    • 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 1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Community Edition (version 2020.2.4)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 52.0.4
    • Dart plugin version 202.8070

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • Mac OS X 10.15.7 19H2 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 87.0.4280.88

• No issues found!
Process finished with exit code 0

[adrianflutur]

I'd like to say that the iframe works just fine if you wrap all widgets that appear on top of it with PointerInterceptor.
It doesn't repaint anymore, no matter what you do.
https://pub.dev/packages/pointer_interceptor

[ditman]

@adrianflutur can you post your code? what were you wrapping exactly?

[adrianflutur]

@ditman sure
as I said, all widgets that appear on top of it (that is - all buttons from top left corner which are in the Stack)

...
Stack(
  children: <Widget>[
     HtmlElementView(
       viewType: _htmlElementViewType,
     ), // *** Must come before the rest...
     for (var i = 1; i <= 5; i++)
       PointerInterceptor(                                // HERE
         child: Container(
             // *** i >= 5
             color: Colors.transparent, // *** any color will do
             child: RaisedButton(
               // *** not sure if other widgets trigger this
               onPressed: () {},
             )),
       ),
   ],
 ),
 ...

[ditman]

Interesting @adrianflutur, this is definitely a side effect of the PointerInterceptor but not its intended purpose! :)

[adrianflutur]

@ditman hahah yeah well, this package managed to fix two of the most frustrating issues related to HtmlElementView in one shot, so...if it works, it works I guess :-) at least until it's fixed for real

[ditman]

I've started working on this, please track progress here: #80524

[ditman]

I've uploaded an updated version of the app with the Engine fix applied, and it seems to work much better! Yay!

https://dit-iframe-reload-example.web.app

I'll keep testing other problematic apps

[github-actions]

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.