Issue with Zoom and Gesture Handling in WebView on iOS When Forcing Desktop Viewport

[Sunisha-Eversion]

Description

We are embedding a human body viewer inside a WebView and need to ensure high-detail rendering, which requires a desktop-style viewport to be injected (width=1024). This is working well on Android, but on iOS, there is an issue with zooming and gesture interpretation.

Steps to Reproduce

1. Load a human body model in a WebView.
2. Inject a desktop-style viewport via JavaScript:

Future<void> modifyViewport() async {
  Future.delayed(const Duration(milliseconds: 200), () async {
    await evaluateJavascript(source: '''
        (function() {
          var viewport = document.querySelector('meta[name="viewport"]');
          if (viewport) {
            viewport.parentNode.removeChild(viewport); // Remove mobile viewport meta tag
          }
          var newViewport = document.createElement('meta');
          newViewport.name = "viewport";
          newViewport.content = "width=1024, user-scalable=yes"; // Force desktop width
          document.head.appendChild(newViewport);
        })();
      ''');
  });
}

3. On Android, everything works as expected. The human body model can be rotated, panned, and zoomed properly.
4. On iOS, zooming works only when the body model interaction (rotation, panning, etc.) is disabled. However, when interaction is enabled, zoom gestures do not work as expected (i.e., pinch to zoom doesn’t behave properly).

Expected Behavior

1. Zooming should work correctly on both Android and iOS when the body model's interactions (like rotation, panning, etc.) are enabled.
2. The viewport meta tag change should not interfere with zoom gestures on iOS.

Environment

Platform: iOS (Version 12.x and above)
WebView: flutter_inappwebview: ^6.1.4
JavaScript code: Injected viewport meta tag with width=1024 and user-scalable=yes.
Flutter version:
Flutter 3.24.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 2663184aa7 (7 months ago) • 2024-09-11 16:27:48 -0500
Engine • revision 36335019a8
Tools • Dart 3.5.3 • DevTools 2.37.3

Additional Context

It seems that iOS may handle touch events and scaling differently in WKWebView compared to Android. The desktop-style viewport is likely causing the issue by preventing proper gesture handling in the context of touch events. We want to maintain the high-detail rendering but also enable full interaction on iOS.

Workaround

The issue is temporarily resolved by disabling the interaction features (zoom, rotate, pan), but this is not ideal as it sacrifices the core functionality of our application.

Request

Would appreciate any insights into:

How the viewport changes might be interacting with iOS gesture handling in WKWebView.
Possible workarounds or fixes to allow both desktop rendering and interaction features (zoom, pan, rotate) to work properly on iOS.