Click Offset Issues with InAppWebView on Android Devices

[dqmmtt]

I'm encountering issues with screen adaptation and click offset when using InAppWebView in my Flutter application, specifically on Android devices. The version of the plugin I am utilizing is flutter_inappwebview: ^6.0.0. To address screen adaptation, I've implemented a calculation for the device pixel ratio:

double get devicePixelRatio {
  return windowWrapper.physicalSize.width / designWidth;
}

Despite this implementation, click events within the web view exhibit significant offsets, causing difficulties with user interface interactions on Android devices. video:

https://github.com/user-attachments/assets/04492b9a-8c61-442d-b7b4-ec483997787d

[github-actions[bot]]

👋 @dqmmtt

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

[loselfmin]

I have the same issues.

[ClubAce]

I sure hope the plugin is still maintained because this problem still persists, specifically on Android. Please fix the click offset issue 🙏

[ClubAce]

I think I found a possible reason for the tap offset misbehavior in my case. I'm using the plugin scaled_app 2.3.0 on my entire app, implemented like so:

Future<void> main() async {
  ScaledWidgetsFlutterBinding.ensureInitialized(
    scaleFactor: (deviceSize) {
      const double widthOfDesign = 412;
      return deviceSize.width / widthOfDesign;
    },
  );

  runApp(const MainApp());
}

But when I replace it with WidgetsFlutterBinding.ensureInitialized(), although disrupting the layout some places in the app, the WebView now behaves as expected in regards to registering the correct elements when tapping them.