[Web][Mobile browsers] HTML link is not clickable until interacting with the embedded Flutter app

Steps to reproduce

Reload html with any embedded flutter app on Samsung device (I used tablet and S21FE phone).
Tap on menu-like list items on top.

Expected results

I would like to be able to click on the list of menus, but for 5 to 30 seconds, there is no reaction to tapping on them. Them, either after that time by itself, or it seems faster when I do something on the flutter app (like clicking on the counter button in the famous app), I can bring the HTML to life fast. But it always hangs initially. 100% reproducible after every reload of the html page on my two Samsung devices. Does not happen on my Firefox or Chrome browser on my Linux desktop.

Actual results

I expect the menu to react (visually) on tapping.

Code sample

<!DOCTYPE html>
  <head>
    <base href="/" />

    <meta charset="UTF-8" />
    <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Blah" />

    <!-- 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="Blah" />
    <link rel="apple-touch-icon" href="icons/castle.png" />

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

    <title>Intro Muros</title>
    <link rel="manifest" href="manifest.json" />
    <link rel="stylesheet" href="css/stylebug.css">

  </head>
  <body>
  
  <section class="topmenu" >
  
  </style>
  
  <ul>
     <li><a id="menu_frankfurt" href="#frankfurt">Frankfurt</a></li>
     <li><a id="menu_ulm" href="#ulm">Ulm</a></li>
     <li><a id="menu_erfurt" href="#erfurt">Erfurt</a></li>
     <li><a id="menu_bremen" href="#bremen">Bremen</a></li>
     <li><a id="menu_osnabrueck" href="#osnabrueck">Osnabrück</a></li>
   </ul>
   </section>

   <div class="grid">
   
    <section class="contents">
      <article>
        <div id="flutter_target"></div>
      </article>
    </section>

    <section class="blahblah">
        <H2>Intra Muros</H2>
    </section>
    
    </div>
    
    
    <script>
      {{flutter_js}}
      {{flutter_build_config}}


      const target = document.getElementById('flutter_target');
      _flutter.loader.load({
        onEntrypointLoaded: async function (engineInitializer) {
          const appRunner = await engineInitializer.initializeEngine({
            hostElement: target,
          });
          await appRunner.runApp();
        }
      });
    </script>
  </body>
</html>

CSS here

* {
  box-sizing: border-box;
}

#flutter_target {
  height: 40vh;
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[Paste your output here]

Your sample code is incomplete so I tried with the one below but couldn't see the issue on my device Galaxy Tab A7 Lite (Android 14), Chrome browser.

Sample code (index.html)

Replace index.html on a newly created Flutter project:

<!DOCTYPE html>
<html>

<head>
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A new Flutter project.">

  <!-- 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="reproduce_web_embedding">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

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

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

  <script>
    // The value below is injected by flutter build, do not touch.
    const serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
  <style>
    * {
      box-sizing: border-box;
    }
    #flutter_target {
      height: 40vh;
    }
  </style>
</head>

<body>
  <section class="topmenu">
    <ul>
      <li><a id="menu_frankfurt" href="#frankfurt">Frankfurt</a></li>
      <li><a id="menu_ulm" href="#ulm">Ulm</a></li>
      <li><a id="menu_erfurt" href="#erfurt">Erfurt</a></li>
      <li><a id="menu_bremen" href="#bremen">Bremen</a></li>
      <li><a id="menu_osnabrueck" href="#osnabrueck">Osnabrück</a></li>
    </ul>
  </section>

  <div class="grid">
    <section class="contents">
      <article>
        <div id="flutter_target"></div>
      </article>
    </section>
    <section class="blahblah">
      <H2>Intra Muros</H2>
    </section>
  </div>

  <script>
    window.addEventListener('load', function (ev) {
      let target = document.querySelector("#flutter_target");
      _flutter.loader.loadEntrypoint({
        onEntrypointLoaded: async function (engineInitializer) {
          let appRunner = await engineInitializer.initializeEngine({
            hostElement: target,
          });
          await appRunner.runApp();
        },
      });
    });
  </script>
</body>

</html>

Please also try this sample code on your end and confirm whether it happens.

there is no reaction to tapping on them

Please be more specific on this. Can you provide a recorded video of the bug?

Please provide output of flutter doctor -v as well. Thanks!

flutter doctor -v
[✓] Flutter (Channel stable, 3.22.1, on Ubuntu 24.04 LTS 6.8.0-39-generic, locale de_DE.UTF-8)
• Flutter version 3.22.1 on channel stable at /home/robert/snap/flutter/common/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision a14f74f (vor 3 Monaten), 2024-05-22 11:08:21 -0500
• Engine revision 55eae6864b
• Dart version 3.4.1
• DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /home/robert/Android/Sdk
• Platform android-34, build-tools 34.0.0
• Java binary at: /home/robert/AndroidStudio/jbr/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
• 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.1)
• Android Studio at /home/robert/AndroidStudio
• Flutter plugin version 77.2.1
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] VS Code (version 1.92.0)
• VS Code at /snap/code/current/usr/share/code
• Flutter extension can be installed from:
🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Ubuntu 24.04 LTS 6.8.0-39-generic
• Chrome (web) • chrome • web-javascript • Google Chrome 125.0.6422.112

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

• No issues found!

You didn't embed the html element, but the whole window. Change "hostElement: target" to "hostElement: flutter_target" and you'll see a mini list. I have put this app temporarily on my site
http://intra-muros.net
for you to see. I also filmed the bug and will try to upload.

20240805_185206.mp4

Reload app from http://intra-muros.net on Samsung tablet, on tapping on the links, nothing will happen. Play with the flutter app, like clicking on floating button, and the list will come to life. In my real app, it can hang for 30s and seems completely broken.

20240805_185635.mp4

This is the right behaviour with visual feedback that will appear after 5s to 30s if you play with the flutter app. I just checked, the hang also appears on a more recent Samsung S21 FE with Android 14 and OneUI 6.1 and on iPhone 13 with iOS 17.6.

You didn't embed the html element, but the whole window. Change "hostElement: target" to "hostElement: flutter_target" and you'll see a mini list.

I used your provided sample code above so I think it's correct.

And it seems this issue happens on other mobile's browsers as well since I see it on Android Chrome and iOS Safari browsers. The steps are:

Built web on a simple app (counter app) with the index.html file as above. The issue happens on both html and canvaskit renderers.
Host it on local machine and open the local site on mobile browsers, for eg: 192.168.1.10:8000
Tap on HTML menu items and see they are all affected (no click effect)
Tap on FAB button on Flutter embedded area a few times. Then tap on HTML menu items again and see the effect when tapping on each item.

The issue doesn't happen on Desktop Web (tested on macOS Chrome browser) so I think this could be a focus issue on mobile browsers only.

Reproduced this on the latest Flutter stable and master channels. I will update the issue title to reflect our tests.

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.22.3, on macOS 14.6 23G80 darwin-x64, locale en-VN)
    • Flutter version 3.22.3 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b0850beeb2 (2 weeks ago), 2024-07-16 21:43:41 -0700
    • Engine revision 235db911ba
    • Dart version 3.4.4
    • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
    • Xcode at /Applications/Xcode15.4.app/Contents/Developer
    • Build 15F31d
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 14.6 23G80 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 127.0.6533.74

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

• No issues found!

[!] Flutter (Channel master, 3.24.0-1.0.pre.460, on macOS 14.6 23G80 darwin-x64, locale en-VN)
    • Flutter version 3.24.0-1.0.pre.460 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ff3ad8290e (12 minutes ago), 2024-08-06 10:28:25 +0800
    • Engine revision 376a853846
    • Dart version 3.6.0 (build 3.6.0-116.0.dev)
    • DevTools version 2.38.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
    • Xcode at /Applications/Xcode15.4.app/Contents/Developer
    • Build 15F31d
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)

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

[✓] Connected device (4 available)
    • Pixel 7 (mobile) • 2B171FDH20084L                           • android-arm64  • Android 14 (API 34)
    • iPhone (mobile)  • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.8 19H370
    • macOS (desktop)  • macos                                    • darwin-x64     • macOS 14.6 23G80 darwin-x64
    • Chrome (web)     • chrome                                   • web-javascript • Google Chrome 127.0.6533.89

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

! Doctor found issues in 1 category.

Hi all, as others have reported in identical reports, this is seems to be caused by Flutter inserting semantics for web readers (I think) and I can fix the problem for me by removing these semantics placeholders. That is obviously not a good solution.

document.querySelector("flt-semantics-placeholder")?.remove();

The real fix for this, until we have some usable semantics-on-by-default, is to place a placeholder on top of each <flutter-view> instead of a singleton that stretches the whole page, covering all of the HTML content.

[web] Scope the mobile semantics placeholder to its view (flutter#190856

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

[Web][Mobile browsers] HTML link is not clickable until interacting with the embedded Flutter app #152838

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

25 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Web][Mobile browsers] HTML link is not clickable until interacting with the embedded Flutter app #152838

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

huycozy commented on Aug 5, 2024

RobertRoeb commented on Aug 5, 2024

RobertRoeb commented on Aug 5, 2024

RobertRoeb commented on Aug 5, 2024

RobertRoeb commented on Aug 5, 2024

huycozy commented on Aug 6, 2024

25 remaining items

RobertRoeb commented on Feb 7, 2025

yjbanov commented on Jul 21, 2026

github-actions commented on Oct 5, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions