[webview_flutter] Webview response to Tap from the widget above it as Long press #81367

yiv · 2021-04-28T09:15:51Z

I layout a stack on a screen, on the bottom of the stack there is a Webview, and above the Webview there are multiple Buttons.
When I tap the button, the Long Press menu on the Webview shows up.
And I also have a Drawer, when I tap the item on the Drawer, the Drawer faded out, and the Long Press menu on the Webview shows up too.

lkrjangid1 · 2021-04-28T10:20:48Z

can you please provide the code of this page?

TahaTesser · 2021-04-28T12:42:19Z

Hi @yiv
Is this on Android or iOS, device or emulator?
Can you please provide your flutter doctor -v and a minimal complete reproducible code sample and flutter run --verbose logs running the minimal code sample?
Thank you

yiv · 2021-04-28T14:02:11Z

device
It's iOS device,
For emulator, the issue occurs mostly on every Tap,
For iPhone, the issuse occurs only on Tap Drawer
minimal complete reproducible code sample
https://github.com/yiv/flutter_demo
flutter doctor -v

flutter doctor -v

[✓] Flutter (Channel stable, 2.0.5, on macOS 11.2.3 20D91 darwin-x64, locale zh-Hans-CN)
    • Flutter version 2.0.5 at /Volumes/data/project/sdks/flutter
    • Framework revision adc687823a (12 days ago), 2021-04-16 09:40:20 -0700
    • Engine revision b09f014e96
    • Dart version 2.12.3

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Volumes/data/project/sdks/android
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Volumes/data/project/sdks/android
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 49.0.2
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] IntelliJ IDEA Ultimate Edition (version 2020.3)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 52.0.5
    • Dart plugin version 203.5981.152

[✓] Connected device (3 available)
    • YPhone (mobile)        • 00008030-000515EE1A32802E            • ios            • iOS 14.4
    • iPhone 12 Pro (mobile) • 0FC5DC9C-66EE-4338-BEF1-9C7BDE8E5CE8 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator)
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 90.0.4430.93

• No issues found!

TahaTesser · 2021-04-29T08:12:15Z

Hi @yiv
The code you provided seems to have a lot of unrelated code and UI, can you please reduce the code sample to a minimal code sample and provide steps to reproduce,
Thank you

yiv · 2021-04-29T09:21:44Z

https://github.com/yiv/flutter_demo

I have clean the code, removed some unrelated code and UI.
The rest contains components like below:

assets/blockly: It's static content of website
assets/demo: It's demo data for making list items on Drawer
LocalAssetsServer: start a http server along with the app for Webview to visit
WebView
Button in the top middle of the screen used for Tap testing
Drawer used for Tap testing

Steps to reproduce:

run the app
try to Tap the button in the top middle of the screen, the long press menu of website app will shows up
try to Tap the list item on the Drawer, the long press menu of website app will shows up

TahaTesser · 2021-04-30T07:10:16Z

@yiv
I don't see a list item on the drawer (your app launches in landscape mode by default so I had to rotate it)

Screen.Recording.2021-04-30.at.10.05.44.AM.mov

yiv · 2021-04-30T07:24:47Z

@TahaTesser There are some logic bugs, try hot reload the flutter app then the item will shows up

TahaTesser · 2021-04-30T08:01:15Z

@yiv
I can see the item after hot reload but it closes the drawer

Screen.Recording.2021-04-30.at.11.00.22.AM.mov

yiv · 2021-04-30T08:53:24Z

Yes, it close the drawer after tap the item.

Then the menu of web app shows up like the video
https://user-images.githubusercontent.com/16640312/116672013-3c042e80-a9d4-11eb-983c-a618708432d5.mov

TahaTesser · 2021-05-03T07:56:32Z

Hi @yiv
Thanks for the video, I can reproduce the issue behavior, when just tap a widget, it triggers long presses for below it

flutter doctor -v

[✓] Flutter (Channel stable, 2.0.6, on macOS 11.3 20E232 darwin-x64, locale en-GB)
    • Flutter version 2.0.6 at /Users/tahatesser/Code/flutter_stable
    • Framework revision 1d9032c7e1 (3 days ago), 2021-04-29 17:37:58 -0700
    • Engine revision 05e680e202
    • Dart version 2.12.3

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.1)
    • 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 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (3 available)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E            • ios            • iOS 14.5
    • iPhone 12 (mobile)   • 4D5BE4C8-BF1D-46CD-B595-FD81A7140B52 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-5
      (simulator)
    • Chrome (web)         • chrome                               • web-javascript • Google Chrome 90.0.4430.93
    ! Error: Taha’s iPad is busy: Copying cache files from device. Xcode will continue when Taha’s iPad is finished. (code -10)

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.3.0-1.0.pre.205, on macOS 11.3 20E232 darwin-x64, locale en-GB)
    • Flutter version 2.3.0-1.0.pre.205 at /Users/tahatesser/Code/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 96e4b47f5d (18 hours ago), 2021-05-02 07:24:01 -0700
    • Engine revision 3e578c6e0d
    • Dart version 2.14.0 (build 2.14.0-48.0.dev)

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.1)
    • 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 1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Community Edition (version 2021.1.1)
    • IntelliJ at /Volumes/Extreme/IntelliJ IDEA CE.app
    • Flutter plugin version 55.1.5
    • Dart plugin version 211.7233

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

[✓] Connected device (3 available)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E            • ios            • iOS 14.5
    • iPhone 12 (mobile)   • 4D5BE4C8-BF1D-46CD-B595-FD81A7140B52 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-5
      (simulator)
    • Chrome (web)         • chrome                               • web-javascript • Google Chrome 90.0.4430.93
    ! Error: Taha’s iPad is busy: Copying cache files from device. Xcode will continue when Taha’s iPad is finished. (code -10)

! Doctor found issues in 1 category.

objectix-labs · 2021-10-12T16:40:40Z

@TahaTesser, @yiv: I just want to add my two cents on this issue. I have a similar issue with my web application based on Autodesk Forge Viewer. I found out that tapping on a Flutter widget located on top of the WebView (in iOS only) results in a "touchstart" event being propagated to the WebView (which actually should not happen because I would expect the button widget to "consume" the tap event entirely), but no "touchend" event at all! When I tap the widget again, the missing "touchend" is fired first, then immediately followed by a fresh "touchstart" (with the corresponding "touchend" event missing again).

I don't know how the web application's longpress has been implemented. But usually those web applications use the "touchstart" event to start a timer, which gets stopped, if a "touchend" is received. If the timer expires before this happens, it considers the user's gesture being a "longpress" and act accordingly.

As the "touchend" never is fired within the longpress time interval, the timer expires and the web application detects a "longpress".

I have opened an issue (#91681) in a similar case that demonstrates, which touch events are detected by the webview. I also included a video that shows the touch event behavior explained above. In my case it was an active IgnorePointer widget wrapped around a webview. But I had exactly the same issue, when tapping on Flutter widget on top of a webview. So I assume there might be some relationship.

objectix-labs · 2021-10-13T14:26:41Z

@TahaTesser, @yiv: I just took the time to adjust my code sample from #91681 to make minimal showcase that demonstrates the behavior I attempted to point out in my last comment and which closely relates to the original issue in this ticket. Please find attached the complete Flutter application code for reproduction and also a small screen recording.

The recording shows a WebView on which a FloatingActionButton has been placed. The web application in the webview logs any touchstart, touchend, click and longpress events (the latter which has been implemented by the mechanism explained in my previous comment) as they are received and handled by the webview.

The first two clicks are performed directly on the webview and work flawlessly. The next couple of clicks are performed on the FloatingActionButton, and you can easily see the different handling of touch events handled by the web application, which eventually results in incorrect detection of "longpress" events (as explained in my previous comment).

I think this is the reason why the web application posted by @yiv detects longpress events when tapping on the Flutter widget.

Full Flutter Code for reproduction

ScreenFlow.mp4

flutter doctor -v

flutter doctor -v
[✓] Flutter (Channel stable, 2.5.2, on macOS 11.6 20G165 darwin-x64, locale
    de-DE)
    • Flutter version 2.5.2 at /Users/chris/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 3595343e20 (13 days ago), 2021-09-30 12:58:18 -0700
    • Engine revision 6ac856380f
    • Dart version 2.14.3

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

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.0, Build version 13A233
    • 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-7281165)

[✓] IntelliJ IDEA Ultimate Edition (version 2021.1.3)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 58.0.3
    • Dart plugin version 211.7665

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

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 94.0.4606.81
    ! Error: Christians iPhone XS is not connected. Xcode will continue when
      Christians iPhone XS is connected. (code -13)

• No issues found!

shinriyo · 2023-02-28T01:37:28Z

Not only Long press but also simply tap also webview_flutter's WebView widget responds.

IgnorePointer, AbsorbPointer, and pointer_interceptor can't guard tapping.

shinriyo · 2023-02-28T02:22:46Z

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

class WebViewGuard extends StatefulWidget {
  const WebViewGuard({Key? key}) : super(key: key);

  @override
  WebViewGuardState createState() => WebViewGuardState();
}

class WebViewGuardState extends State<WebViewGuard> {
  WebViewController controller = WebViewController();
  @override
  void initState() {
    super.initState();

    Future(() async {
      await controller.setBackgroundColor(Colors.transparent);
    });
  }

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(
      controller: controller,
    );
  }
}

OK!

Stack(
  children: [
    const SizedBox(height: 60, child: WebViewGuard()),
    const Text('your widget'),
  ],
),

TahaTesser added the in triage Presently being triaged by the triage team label Apr 28, 2021

TahaTesser added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 28, 2021

no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 28, 2021

TahaTesser added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 29, 2021

no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 29, 2021

TahaTesser added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 30, 2021

no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 30, 2021

TahaTesser added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 30, 2021

no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 30, 2021

TahaTesser changed the title ~~Webview response to Tap from the widget above it as Long press~~ [webview_flutter] Webview response to Tap from the widget above it as Long press May 3, 2021

stuartmorgan added a: platform-views Embedding Android/iOS views in Flutter apps P2 Important issues not at the top of the work list labels May 6, 2021

objectix-labs mentioned this issue Oct 12, 2021

[webview_flutter][iOS] WebView wrapped in active IgnorePointer widget still receives some touch events on iOS 14.7/15.0 #91681

Closed

stuartmorgan removed the p: first party label Feb 10, 2023

flutter-triage-bot bot added the package flutter/packages repository. See also p: labels. label Jul 5, 2023

Hixie removed the plugin label Jul 6, 2023

flutter-triage-bot bot added team-ecosystem Owned by Ecosystem team triaged-ecosystem Triaged by Ecosystem team labels Jul 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[webview_flutter] Webview response to Tap from the widget above it as Long press #81367

[webview_flutter] Webview response to Tap from the widget above it as Long press #81367

yiv commented Apr 28, 2021

lkrjangid1 commented Apr 28, 2021

TahaTesser commented Apr 28, 2021

yiv commented Apr 28, 2021 •

edited by TahaTesser

TahaTesser commented Apr 29, 2021 •

edited

yiv commented Apr 29, 2021 •

edited

TahaTesser commented Apr 30, 2021

yiv commented Apr 30, 2021

TahaTesser commented Apr 30, 2021

yiv commented Apr 30, 2021

TahaTesser commented May 3, 2021

objectix-labs commented Oct 12, 2021 •

edited

objectix-labs commented Oct 13, 2021 •

edited

shinriyo commented Feb 28, 2023 •

edited

shinriyo commented Feb 28, 2023

[webview_flutter] Webview response to Tap from the widget above it as Long press #81367

[webview_flutter] Webview response to Tap from the widget above it as Long press #81367

Comments

yiv commented Apr 28, 2021

lkrjangid1 commented Apr 28, 2021

TahaTesser commented Apr 28, 2021

yiv commented Apr 28, 2021 • edited by TahaTesser

TahaTesser commented Apr 29, 2021 • edited

yiv commented Apr 29, 2021 • edited

TahaTesser commented Apr 30, 2021

yiv commented Apr 30, 2021

TahaTesser commented Apr 30, 2021

yiv commented Apr 30, 2021

TahaTesser commented May 3, 2021

objectix-labs commented Oct 12, 2021 • edited

objectix-labs commented Oct 13, 2021 • edited

shinriyo commented Feb 28, 2023 • edited

shinriyo commented Feb 28, 2023

yiv commented Apr 28, 2021 •

edited by TahaTesser

TahaTesser commented Apr 29, 2021 •

edited

yiv commented Apr 29, 2021 •

edited

objectix-labs commented Oct 12, 2021 •

edited

objectix-labs commented Oct 13, 2021 •

edited

shinriyo commented Feb 28, 2023 •

edited