Skip to content

flutter web embedded in html div does not scroll with touch events properly #146732

New issue
New issue
Closed
flutter/engine
#53647
Closed
flutter web embedded in html div does not scroll with touch events properly#146732
flutter/engine
#53647
Labels
r: fixedIssue is closed as already fixed in a newer version
@davidskelly

Description

@davidskelly
davidskelly
opened on Apr 14, 2024

Steps to reproduce

This issue appears when flutter web is embedded inside a div (setting the host element hostElement: document.querySelector("#flutter_host") when initializing the engine) and only for touch events.

  1. create sample flutter web project with scrolling view (see sample code main.dart)
  2. build web app (flutter build web)
  3. update build/index.html to embed into a div #flutter_host (see sample code index.html, documentation is here https://docs.flutter.dev/deployment/web)
  4. cd build/web
  5. python3 -m http.server
  6. user a browser to open the web page (http://0.0.0.0:8000/)
  7. enable touch events by enabling the device toolbar (linux chrome -> ctrl+shift+i followed by ctrl+shift+m)
    image
  8. click and drag on the scrolling list view to scroll it
  9. view does not scroll correctly

Note:

  1. scrolling with a mouse wheel works fine.
  2. scrolling with touch events when not attached to a div works fine
  3. html and canvas renderers exhibit the same problem with touch events
  4. I was able to reproduce the issue with firefox + chrome on linux, and chrome and safari on macos

Expected results

Scrolling view should scroll smoothly.

Actual results

Scroll view does not scroll, or barely scrolls and then seems to lose the touch event, or starts scrolling the parent/containing div instead.

Code sample

main.dart 
import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(
      items: List<String>.generate(100, (i) => 'Item $i'),
    ),
  );
}

class MyApp extends StatelessWidget {
  final List<String> items;

  const MyApp({super.key, required this.items});

  @override
  Widget build(BuildContext context) {
    const title = 'Long List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          prototypeItem: ListTile(
            title: Text(items.first),
          ),
          itemBuilder: (context, index) {
            return Container(
              color: index % 2 == 0 ? Colors.white : Colors.blue.shade100,
              child: ListTile(
                title: Text(items[index]),
              ),
            );
          },
        ),
      ),
    );
  }
}
index.html 
<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="/">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="ScrollTest">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="scroll_test">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>scroll_test</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    const serviceWorkerVersion = "1413795485";
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
</head>
<body>
<div id="flutter_host" style="width: 300px; height: 300px;"></div>
  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine({
             hostElement: document.querySelector("#flutter_host"),
          }).then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });
  </script>
</body>
</html>

Screenshots or Video

Screenshots / Video demonstration
flutter_div_touch_scroll.mov

Logs

Logs 
n/a

Flutter Doctor output

Doctor output 
[✓] Flutter (Channel stable, 3.19.0, on Ubuntu 22.04.4 LTS 6.5.0-27-generic, locale en_US.UTF-8)
    • Flutter version 3.19.0 on channel stable at /home/me/snap/flutter/common/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision bae5e49bc2 (9 weeks ago), 2024-02-13 17:46:18 -0800
    • Engine revision 04817c99c9
    • Dart version 3.3.0
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /home/me/Android/Sdk
    • Platform android-34, build-tools 33.0.1
    • Java binary at: /home/me/.local/share/JetBrains/Toolbox/apps/android-studio/jbr/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 10.0.0-4ubuntu1
    • cmake version 3.16.3
    • ninja version 1.10.0
    • pkg-config version 0.29.1

[✓] Android Studio (version 2023.2)
    • Android Studio at /home/me/.local/share/JetBrains/Toolbox/apps/android-studio
    • Flutter plugin version 78.4.1
    • Dart plugin version 222.4582
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] IntelliJ IDEA Ultimate Edition (version 2024.1)
    • IntelliJ at /home/me/.local/share/JetBrains/Toolbox/apps/intellij-idea-ultimate
    • 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

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 22.04.4 LTS 6.5.0-27-generic
    • Chrome (web)    • chrome • web-javascript • Google Chrome 123.0.6312.105

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Metadata

Metadata

Assignees

No one assigned

    Labels

    r: fixedIssue is closed as already fixed in a newer version

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions