flutter / flutter/flutter

[Flutter Web] HtmlElementView issues with scrolling and mouse events on Chrome <= 109

Open
#169,504 10 comments 0 reactions 0 assignees View on GitHub
a: mouse browser: chrome-desktop P3 platform-web team-web triaged-web
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

I have a web system built with Flutter Web that uses multiple HtmlElementView widgets to render HTML content, including iframes and other embedded elements.

Everything works correctly on Flutter 3.16.5 (stable) — even on older versions of Chrome, including Chrome 109 and below.

However, after upgrading to Flutter 3.32.0, all HtmlElementView elements started behaving erratically, in Chrome versions ≤109, which are still commonly used in my country (due to many users being on Windows 7/8, where Chrome is stuck on version 109).

❗️Problems observed on Chrome 109 and Flutter 3.32.0:
Visual glitches when hovering the mouse over buttons inside HtmlElementView

Entire screen may turn black randomly

Some elements flicker or are rendered multiple times

Sometimes content disappears and reappears when interacting

Resizing the browser window causes the layout to temporarily fix itself

This behavior was not present in Flutter 3.16.5 under the same conditions.

✅ Works fine in:
Flutter 3.16.5 + Chrome 109 and earlier

Flutter 3.32.0 + Chrome 110 >

🔗 To help reproduce the issue:
You can test with Chromium version 109, available here:

https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Win_x64%2F1061085%2Fchrome-win.zip?generation=1666201622762457&alt=media

https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html

https://github.com/user-attachments/assets/06297af5-2883-44df-bf92-3490856e1d40

### Expected results

✅ Expected results
HtmlElementView should render HTML content (including iframes) correctly without flickering, duplication, or black screens.

Mouse interactions like hover should behave normally.

No visual glitches should occur when interacting with the page.

The layout should remain stable without needing to resize the browser window.

### Actual results

❗️Problems observed on Chrome 109 and Flutter 3.32.0:
Visual glitches when hovering the mouse over buttons inside HtmlElementView

Entire screen may turn black randomly

Some elements flicker or are rendered multiple times

Sometimes content disappears and reappears when interacting

Resizing the browser window causes the layout to temporarily fix itself

This behavior was not present in Flutter 3.16.5 under the same conditions.

### Code sample

Code sample

```dart

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

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'HtmlElementView Bug Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HtmlElementViewScreen(),
);
}
}

class HtmlElementViewScreen extends StatefulWidget {
@override
_HtmlElementViewScreenState createState() => _HtmlElementViewScreenState();
}

class _HtmlElementViewScreenState extends State {
final String viewId = 'html-element-view-demo';
bool isElementRegistered = false;

@override
void initState() {
super.initState();
_registerHtmlElement();
}

void _registerHtmlElement() {
// Criar elemento HTML personalizado
final html.DivElement divElement = html.DivElement()
..id = 'demo-element'
..style.width = '100%'
..style.height = '200px'
..style.backgroundColor = '#e3f2fd'
..style.border = '2px solid #1976d2'
..style.borderRadius = '8px'
..style.display = 'flex'
..style.alignItems = 'center'
..style.justifyContent = 'center'
..style.flexDirection = 'column'
..style.fontFamily = 'Arial, sans-serif';

// Adicionar conteúdo ao elemento
final html.HeadingElement title = html.HeadingElement.h2()
..text = 'Elemento HTML Customizado'
..style.color = '#1976d2'
..style.margin = '0 0 10px 0';

final html.ParagraphElement description = html.ParagraphElement()
..text = 'Este é um elemento HTML renderizado dentro do HtmlElementView'
..style.color = '#424242'
..style.textAlign = 'center'
..style.margin = '0 0 15px 0';

final html.ButtonElement button = html.ButtonElement()
..text = 'Clique aqui!'
..style.padding = '10px 20px'
..style.backgroundColor = '#1976d2'
..style.color = 'white'
..style.border = 'none'
..style.borderRadius = '4px'
..style.cursor = 'pointer'
..style.fontSize = '14px';

// Adicionar evento ao botão
button.onClick.listen((event) {
html.window.alert('Botão clicado dentro do HtmlElementView!');
});

// Adicionar elementos ao div principal
divElement.children.addAll([title, description, button]);

// Registrar o elemento com o Flutter
try {
ui_web.platformViewRegistry.registerViewFactory(
viewId,
(int viewId) => divElement,
);
setState(() {
isElementRegistered = true;
});
} catch (e) {
print('Erro ao registrar HtmlElementView: $e');
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('HtmlElementView Bug Demo'),
backgroundColor: Colors.blue,
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: SingleChildScrollView(
child: Container(width: 600,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Card(
elevation: 4,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Informações do Teste',
style: Theme.of(context).textTheme.headlineSmall,
),
SizedBox(height: 8),
Text('View ID: $viewId'),
Text('Elemento registrado: ${isElementRegistered ? "Sim" : "Não"}'),
Text('Platform: Flutter Web'),
],
),
),
),
SizedBox(height: 16),
Text(
'HtmlElementView abaixo:',
style: Theme.of(context).textTheme.titleMedium,
),
SizedBox(height: 8),
Container(
height: 250,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(8),
),
child: isElementRegistered
? HtmlElementView(
viewType: viewId,
)
: Center(
child: CircularProgressIndicator(),
),
),
SizedBox(height: 16),
ElevatedButton(
onPressed: () {
// Recriar o elemento para testar comportamentos
setState(() {
isElementRegistered = false;
});
Future.delayed(Duration(milliseconds: 500), () {
_registerHtmlElement();
});
},
child: Text('Recriar HtmlElementView'),
),
SizedBox(height: 8),
ElevatedButton(
onPressed: () {
// Mostrar informações de debug
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Debug Info'),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('View ID: $viewId'),
Text('Registrado: $isElementRegistered'),
Text('User Agent: ${html.window.navigator.userAgent}'),
Text('URL: ${html.window.location.href}'),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text('Fechar'),
),
],
),
);
},
child: Text('Mostrar Debug Info'),
),

Container(height: 800,),

Text("Final Da Pagina")
],
),
),
),
),
);
}
}

// Widget adicional para testar interações
class InteractiveHtmlElement extends StatefulWidget {
@override
_InteractiveHtmlElementState createState() => _InteractiveHtmlElementState();
}

class _InteractiveHtmlElementState extends State {
final String interactiveViewId = 'interactive-html-view';
int clickCount = 0;

@override
void initState() {
super.initState();
_registerInteractiveElement();
}

void _registerInteractiveElement() {
final html.DivElement container = html.DivElement()
..style.width = '100%'
..style.height = '150px'
..style.backgroundColor = '#f5f5f5'
..style.border = '1px solid #ccc'
..style.display = 'flex'
..style.alignItems = 'center'
..style.justifyContent = 'center'
..style.cursor = 'pointer';

final html.SpanElement counter = html.SpanElement()
..text = 'Cliques: $clickCount'
..style.fontSize = '18px'
..style.fontWeight = 'bold';

container.children.add(counter);

container.onClick.listen((event) {
clickCount++;
counter.text = 'Cliques: $clickCount';
});

ui_web.platformViewRegistry.registerViewFactory(
interactiveViewId,
(int viewId) => container,
);
}

@override
Widget build(BuildContext context) {
return Container(
height: 150,
child: HtmlElementView(viewType: interactiveViewId),
);
}
}

```

### Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

### Logs

Logs

```console
[Paste your logs here]
```

### Flutter Doctor output

Doctor output

```console

flutter doctor -v
[√] Flutter (Channel stable, 3.32.0, on Microsoft Windows [versÆo 10.0.26100.4061], locale pt-BR) [502ms]
• Flutter version 3.32.0 on channel stable at C:\src\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision be698c48a6 (8 days ago), 2025-05-19 12:59:14 -0700
• Engine revision 1881800949
• Dart version 3.8.0
• DevTools version 2.45.1

[√] Windows Version (11 Home 64-bit, 24H2, 2009) [4,5s]

[√] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [3,7s]
• Android SDK at C:\Users\Guilh\AppData\Local\Android\sdk
• Platform android-35, build-tools 35.0.0
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
This is the JDK bundled with the latest Android Studio installation on this machine.
To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314)
• All Android licenses accepted.

[√] Chrome - develop for the web [124ms]
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.10.5) [123ms]
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.10.35122.118
• Windows 10 SDK version 10.0.22621.0

[√] Android Studio (version 2024.1) [25ms]
• Android Studio at C:\Program Files\Android\Android Studio
• 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 17.0.11+0--11852314)

[√] VS Code (version 1.100.2) [23ms]
• VS Code at C:\Users\Guilh\AppData\Local\Programs\Microsoft VS Code
• Flutter extension can be installed from:
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (3 available) [259ms]
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [versÆo 10.0.26100.4061]
• Chrome (web) • chrome • web-javascript • Google Chrome 137.0.7151.41
• Edge (web) • edge • web-javascript • Microsoft Edge 136.0.3240.92

[√] Network resources [408ms]
• All expected network resources are available.

• No issues found!

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.