Repository navigation
[web?] HtmlElementView repainting with some interactions (Iframe reloading) #71888
Description
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:///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:///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://127.0.0.1:38441/devtools/browser/292e5742-dd7e-4f5e-b5d4-b0af7030a411
[ +449 ms] DwdsInjector: Received request for entrypoint at http://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://localhost:38455/main_module.bootstrap.js
[+1651 ms] DevHandler: Debug service listening on ws://127.0.0.1:43017/bJKMnPMAMS0=/ws
[ +5 ms] Debug service listening on ws://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
Reacted by Neil and chunhunghan
Activity
pedromassangocode commentedon Dec 8, 2020
Reproducible on latest
masterchannel.Note: running with Canvas-Kit the issue does not reproduce by hovering the button but still reproduces by resizing the webpage.
flutter doctor -v
adrianflutur commentedon Dec 29, 2020
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 commentedon Jan 6, 2021
@adrianflutur can you post your code? what were you wrapping exactly?
adrianflutur commentedon Jan 6, 2021
@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)
ditman commentedon Jan 6, 2021
Interesting @adrianflutur, this is definitely a side effect of the
PointerInterceptorbut not its intended purpose! :)adrianflutur commentedon Jan 7, 2021
@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 commentedon Apr 15, 2021
I've started working on this, please track progress here: #80524
ditman commentedon Apr 19, 2021
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 commentedon Aug 2, 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 -vand a minimal reproduction of the issue.