[Flutter Web] HtmlElementView issues with scrolling and mouse events on Chrome <= 109
- 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
Assessment
This issue has not been assessed yet.