Repository: flutter
Issue: [Web][Mobile browsers] HTML link is not clickable until interacting with the embedded Flutter app
Labels: platform-web,f: focus,has reproducible steps,team-web,found in release: 3.27,found in release: 3.28

### 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

```html
<!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

```css
* {
  box-sizing: border-box;
}

#flutter_target {
  height: 40vh;
}
```

### Screenshots or Video

<details open>
<summary>Screenshots / Video demonstration</summary>

[Upload media here]

</details>


### Logs

<details open><summary>Logs</summary>

```console
[Paste your logs here]
```

</details>


### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
[Paste your output here]
```

</details>