Web: Weird behaviour with iframes when scrolling

[christophemacabiau]

When scrolling a page with iframes, the iframes are reloaded. Also when coming back to start of the page. See the screencast attached.

https://user-images.githubusercontent.com/621068/107049544-88234680-67ca-11eb-8c3f-26e987bde3a2.mp4

import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:universal_html/html.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Example08());
  }
}

class Example08 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StaggeredGridView.countBuilder(
        primary: false,
        crossAxisCount: 2,
        mainAxisSpacing: 20,
        crossAxisSpacing: 20,
        itemCount: 5,
        itemBuilder: (context, index) => _Tile(index),
        staggeredTileBuilder: (index) => StaggeredTile.fit(1),
      ),
    );
  }
}

class _Tile extends StatelessWidget {
  final int index;
  const _Tile(this.index);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Center(child: WebIframe('M7lc1UVf-VE')),
        Text(
          'Iframe number $index',
          style: const TextStyle(fontWeight: FontWeight.bold),
        ),
      ],
    );
  }
}

class WebIframe extends StatelessWidget {
  final String id;
  const WebIframe(this.id);

  @override
  Widget build(BuildContext context) {
    final IFrameElement iframeElement = IFrameElement();

    iframeElement.src = 'http://www.youtube.com/embed/$id';
    iframeElement.style.border = 'none';

    final key = UniqueKey().toString();
    ui.platformViewRegistry.registerViewFactory(
      key,
      (int viewId) => iframeElement,
    );

    return SizedBox(
      width: 200,
      height: 150,
      child: HtmlElementView(
        key: UniqueKey(),
        viewType: key,
      ),
    );
  }
}

name: gridtest
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_staggered_grid_view: ^0.3.4
  universal_html: ^1.2.3

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

[christophemacabiau]

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.24.0-10.2.pre, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Chrome - develop for the web
[✓] Android Studio
[✓] VS Code (version 1.53.0)
[✓] Connected device (2 available)

[letsar]

Can you test with the latest 0.5.0 preview? https://pub.dev/packages/flutter_staggered_grid_view/versions/0.5.0-dev.1

[letsar]

This thread has been closed since there has not been any response for a while. If you are still experiencing a similar issue, please open a new bug.