[CanvasKit] HtmlElementView destroyed on resize

Bug

Only on CanvasKit, HtmlElementViews are destroyed on resize. This is a critical issue for us as it completely breaks using the embedded video player in full-screen.

Steps to Reproduce

The integrated example is a bit complex, so here is a simplified version of it. It shows the same behavior.

As soon as you resize on CanvasKit, the HtmlElementView is destroyed. Doing the same using the HTML renderer works fine (the iframe is not reloaded).

Run flutter create bug.
Update main.dart as follows:

import 'dart:html';

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

void main() {
  final iframe = IFrameElement()
    ..id = 'bug'
    ..src = 'https://flutter.dev'
    ..allowFullscreen = true
    ..style.overflow = 'hidden'
    ..setAttribute('frameBorder', '0')
    ..setAttribute('scrolling', 'no');
  ui.platformViewRegistry.registerViewFactory(
    'bug',
    (int viewId) => iframe,
  );

  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: SizedBox(
          width: 480,
          height: 270,
          child: HtmlElementView(
            viewType: 'bug',
          ),
        ),
      ),
    ),
  ));
}

Run flutter run -d chrome --web-renderer=html
Resize the window: the Flutter page should not be reloaded when resizing
Run flutter run -d chrome --web-renderer=canvaskit
Resize the window: the Flutter page should not be reloaded when resizing

Illustration

(Turn on sound for an explanation.)

Screen.Recording.2021-03-25.at.18.05.03.mov

Elaborate integrated example showing why this is critical (click to expand)

Integrated example

To illustrate why this is an issue in a real-world sense, here is an example:

Using HTML renderer

As you can see, I am able to use full-screen successfully. I am also able to zoom in a little or resize the window without the HtmlElementView being destroyed.

Screen.Recording.2021-03-25.at.16.59.50.mov

Using CanvasKit renderer

As soon as I tap on full-screen, zoom in, or resize in any other way, the HtmlElementView is destroyed and it does not work at all.

Screen.Recording.2021-03-25.at.17.01.06.mov

In my mind, this is a regression. And a critical one actually. This is because the default web renderer was switched to CanvasKit and if you take a look at the integrated example, you will see that it completely breaks the video player in our web app.

Issue replicable on latest master and stable with canvaskit rendering.

79065.mov

flutter doctor -v

[✓] Flutter (Channel master, 2.1.0-13.0.pre.287, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-GB)
    • Flutter version 2.1.0-13.0.pre.287 at
      /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision bc2c7954db (4 hours ago), 2021-03-25 20:55:16 -0700
    • Engine revision b5e15d055d
    • Dart version 2.13.0 (build 2.13.0-162.0.dev)

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

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

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

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

! Doctor found issues in 1 category.

@ditman

Deduplicating with #51865. @ditman is working on a fix for this, it's just not a trivial fix, so it will take a little time.

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.

Navigation Menu

Repository navigation

[CanvasKit] HtmlElementView destroyed on resize #79065

Bug

Steps to Reproduce