WebView touchstart events are invoked even when the WebView is not hit tested on iOS

[amirh]

Internal: b/126614142
Internal: b/285315999

Sample repro app:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MaterialApp(home: WebViewExample()));

class WebViewExample extends StatelessWidget {
  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        initialUrl: 'https://master-docs-flutter-io.firebaseapp.com/',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
        onPageFinished: (String url) {
          injectTouchListener();
        },
        javascriptChannels: <JavascriptChannel> [
          JavascriptChannel(name: 'Log', onMessageReceived: (JavascriptMessage msg) { print(msg.message); })
        ].toSet() ,
      ),
      floatingActionButton: FloatingActionButton(
        child: Container(color: Colors.orange,),
          onPressed: () {}
          ),
    );
  }
  Future<void> injectTouchListener() async {
    final WebViewController controller = await _controller.future;
    controller.evaluateJavascript("document.addEventListener('touchstart', (event) => { Log.postMessage(String(event)); }, true);");
  }
}

On iOS the message is printing even when tapping the FAB.

[amirh]

cc @cyanglaz

[cyanglaz]

Spent some time investigate this issue with @amirh and @chinmaygarde debugging this issue. We tried replacing 'touchstart' with a different event like 'click', it works fine. We think there could be some special case handling for events like 'touchstart' in iOS. We have not found any way to work around it.

Meanwhile, if anyone encounter this issue, I suggest working around it with a different event type on the web application.

[asavartsov]

In my case, it even worse. When I tap a block in front of WebView, WebView receives touchstart, but does not receive touchend. And it will receive touchend on the next tap with new touchstart right after it.

Finger down
**touchstart**

Finger up
**nothing**

Finger down
**touchend**
**touchstart**

Finger up
**nothing**

Finger down
**touchend**
**touchstart**

Finger up
**nothing**

This behavior breaks my Leaflet map completely. It behaves like always touched.

controller.reload() does fix this behavior until the next touch of any block in front of WebView.

Adding IgnorePointer/AbsorbPointer does not help here. Somehow the page inside WebView still receives touchstart/touchend.

I think other issues about broken map controls could probably have the same source of a problem.

Both of WebView/iOS/touch-related proposed fixes at

macoshita/plugins@65113db

and

https://gist.github.com/Voxar/5dbef0b76cc8cb55d2fe74a492d41c54

does not work for me.

I'm testing on iOS 13.6.

[asavartsov]

A little clarification. As for Leaflet, it actually does not use these touch events on iOS by default. Leaflet detects support for pointer events and uses them instead of touchstart/touchend. And glitches occur because of this: if WebView is touched directly it does receive pointerup and pointerdown. But if a block in front of WebView is touched, pointerdown event is leaking to DOM event listener, but somehow pointerup event does not occur leaving pointerdown alone in the Leaflet's internal array of pointer events. For my project I fixed that by overriding pointer detection @ https://github.com/Leaflet/Leaflet/blob/9b0d7c2a7023e6a83222d96febaee74880601ad8/src/core/Browser.js#L96 setting it to false. Leaflet fallbacks to touchstart/touchend and even though it does receive events from other blocks when it shouldn't because of this bug, it maintains internal state correctly.

[danagbemava-nc]

The issue is reproducible on the latest master (2.5.0-6.0.pre.29) and stable (2.2.3) with the latest webview_flutter: ^2.0.10.

flutter doctor -v

[✓] Flutter (Channel master, 2.5.0-6.0.pre.29, on macOS 11.5.1 20G80 darwin-arm, locale en-GH)
    • Flutter version 2.5.0-6.0.pre.29 at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6876c52b5b (8 hours ago), 2021-08-08 15:34:09 -0700
    • Engine revision c0e59bc7b6
    • Dart version 2.14.0 (build 2.14.0-383.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.2

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

[✓] Android Studio (version 2020.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
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

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

[✓] Connected device (3 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554                        • android-arm64  • Android
      12 (API 31) (emulator)
    • iPhone 12 (mobile)          • F2592D43-5FE3-46BB-8A2B-A38BA468DCE9 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • Chrome (web)                • chrome                               • web-javascript • Google
      Chrome 92.0.4515.131

• No issues found!

[✓] Flutter (Channel stable, 2.2.3, on macOS 11.5.1 20G80 darwin-arm, locale en-GH)
    • Flutter version 2.2.3 at /Users/nexus/dev/sdks/flutter
    • Framework revision f4abaa0735 (5 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.2

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

[✓] Android Studio (version 2020.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
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

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

[✓] Connected device (3 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554                        • android-arm64  • Android
      12 (API 31) (emulator)
    • iPhone 12 (mobile)          • F2592D43-5FE3-46BB-8A2B-A38BA468DCE9 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • Chrome (web)                • chrome                               • web-javascript • Google
      Chrome 92.0.4515.131

• No issues found!

[ggirotto]

We are facing the exactly same issue as @asavartsov described in iOS 15.4 and flutter 2.10.3 when using UiKitView.

[ert485]

Thanks @asavartsov for the description and your workaround. I can't seem to do the same workaround since I'm using a third party library in the webview - I tried catching/disabling touchstart events and creating fake touchend events, but couldn't get it to work with the library. My options left are (1) don't put buttons on top of the webview (below/beside instead), or (2) put the buttons inside the webview instead of being implemented in flutter (and have the html buttons trigger events that get noticed in flutter - which in flutter Web I needed this hack)

[kcisoul]

I spent couple of days to solve this problem.
I think I tried every workaround here and stackOverflow.
Finally I got the answer myself. (it's just simple workaround.)
When you need to draw widgets over WebView, add empty transparent webView over the original webView.

I wrote code like this

Stack(children: [
Opacity(
opacity: 0.01,
child: WebViewWidget(controller: WebViewController())
),
const CircularProgressIndicator(),
]);

This works fine so far.

[cyanglaz]

@kcisoul Thanks for providing the workaround. To make the workaround easier, I think you only need to create an empty transparent PlatformView (UIView) to cover the region that you don't want the WebView to be interacted with.

[903496130]

@kcisoul
you are my superman, boy

[LouiseHsu]

@krokyze yep! thats the plan

[LouiseHsu]

Update: Plan to merge next week post holiday weekend

[LouiseHsu]

The new pointer_interceptor package should be available on pub.dev. now! https://pub.dev/packages/pointer_interceptor

[github-actions]

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.