Issue with WKWebView in iOS CustomHandler: View zooms and shifts on text input

Question

Hello,

I am using a WKWebView in iOS through a custom control in my .NET MAUI project. The URL loads correctly, but when I tap to enter text in an input field, the view zooms in and shifts slightly to the right.

I implemented a custom handler for Android, and it works fine. However, applying a similar custom handler in iOS does not resolve the issue.

1. I have implemented a custom handler in iOS for WKWebView.
2. I attempted to adjust the view and disable zooming, but the problem persists.
3. The issue seems related to keyboard input or the WKWebView's behavior. Here is I am provding iOS customhandler

public class MyWebViewHandler : ViewHandler<WebView, WKWebView>
{
    protected override WKWebView CreatePlatformView()
    {
        var wkWebView = new WKWebView();
        wkWebView.ScrollView.ZoomScale = 1.0f; // Tried disabling zoom
        wkWebView.ScrollView.MaximumZoomScale = 1.0f;
        wkWebView.ScrollView.MinimumZoomScale = 1.0f;
        return wkWebView;
    }
}

For android I used this CustomHandler It is working fine for zooming and scrolling

 protected override WebView CreatePlatformView()
        {
            var webView = base.CreatePlatformView();
            var activity = _context as Activity;

            webView.Settings.JavaScriptEnabled = true;
            webView.Settings.MediaPlaybackRequiresUserGesture = false;
            webView.Settings.AllowContentAccess = true;
            webView.Settings.DatabaseEnabled = true;
            webView.Settings.AllowFileAccessFromFileURLs = true;
            webView.Settings.AllowUniversalAccessFromFileURLs = true;
            webView.Settings.BuiltInZoomControls = true;
            webView.Settings.DomStorageEnabled = true;
            webView.Settings.AllowFileAccess = true;

            webView.SetWebViewClient(new JavascriptWebViewClient(webView, $"javascript: {JavascriptFunction}", $"javascript: {JavaScriptFunctionBack}", $"javascript: {JavaScriptFunctionUserProfile}"));
            webView.AddJavascriptInterface(new JSBridge(webView), "jsBridge");
            webView.SetWebChromeClient(new MyWebClient(activity));

            return webView;
        }

How can I prevent the view from zooming and shifting when entering text in WKWebView on iOS? Are there additional settings or behaviors specific to iOS custom handlers that I should consider?

Thanks in Advance!

Answer 1

The simplest solution is make the input font size > 15px.