Repository: flutter
Issue: WebView on iOS: Screen layout reflow when keyboard opens.
Labels: platform-ios,p: webview,package,has reproducible steps,P2,found in release: 2.10,found in release: 2.11,team-ios,triaged-ios

## Steps to Reproduce

1. Execute `flutter run` on the code sample
2. Tap the input field -- you will see the keyboard opening up and the layout of the site is reflowing to scroll the input-field into the view. During the reflow the container-div is not covering the entirety of the page anymore, and the red background of the website is visible.

The issue is only reproducible on iOS, and only in the Flutter WebView. It is not reproducible in Safari and a WKWebView in a simple Swift-project (see videos below).

**Expected results:**

I expected the red background to not be visible when the keyboard opens, just like in Safari, or a WKWebView in a simple Swift-project.

**Actual results:**

The red background is visible when the keyboard opens.

<details>
<summary>Code sample</summary>

`webview_flutter: ^3.0.0`

```dart
import 'dart:async';

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(const MaterialApp(home: WebViewApp()));
}

const String exampleHTML = '''
<!DOCTYPE html>
<html lang="en">

<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

    <style>
        body,
        html {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: red;
        }
        
        .container {

            /**
             * Padding is necessary so that the input
             * is somewhere in the middle of the page.
             * Opening the keyboard then attempts to scroll
             * the page, which causes the undesirable reflow-effect.
            */
            padding-top: 300px;

            height: 100%;

            background-color: #9a9a9a;
        }
    </style>
</head>

<body>
    <div class="container">
        <p>Email:</p>
        <input type="text" />
    </div>
</body>

</html>
''';

class WebViewApp extends StatefulWidget {
  const WebViewApp();

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  Completer<WebViewController> controller = Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(builder: (context) {
        return WebView(
          onWebViewCreated: (WebViewController webViewController) {
            controller.complete(webViewController);
            webViewController.loadHtmlString(exampleHTML);
          },
          javascriptMode: JavascriptMode.unrestricted,
          zoomEnabled: false,
          debuggingEnabled: true,
        );
      }),
    );
  }
}
```

</details>

If you want to open the HTML in Safari or a WKWebView for debugging, I hosted it here: https://storage.googleapis.com/turbotask-public-stuff-01/bug-reproduction-01/version4.html

<details>
  <summary>Logs</summary>

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```
[✓] Flutter (Channel stable, 2.8.1, on macOS 12.2 21D49 darwin-arm, locale en-DE)
    • Flutter version 2.8.1 at /Users/svenschone/dev/Flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 77d935af4d (8 weeks ago), 2021-12-16 08:37:33 -0800
    • Engine revision 890a5fca2e
    • Dart version 2.15.1

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

[✓] VS Code (version 1.63.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.34.0

[✓] Connected device (2 available)
    • iPhone 13 (mobile) • 3947D8DF-09B4-40BC-9DE3-4AF14D796610 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator)
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 98.0.4758.80

! Doctor found issues in 2 categories.
```

</details>


### Video of the behavior in Flutter WebView

https://user-images.githubusercontent.com/7631673/153115304-487bd0b4-b409-469f-9a4d-59abf9b7246b.mov

### Video of the behavior in Safari (which I deem to be "correct")

https://user-images.githubusercontent.com/7631673/153115435-5e8fc0d5-8d8c-42d7-a619-da390628283b.mov

### Video of behavior in WKWebView in Swift Project in XCode (which I also deem to be "correct")
Unfortunately I cannot share the code for this, but it's a simple WKWebView.

https://user-images.githubusercontent.com/7631673/153115576-fa200167-ea6e-48da-97da-2f4c884bef54.mov

### Video of the issue occuring on Github (with the Flutter WebView):

Note: There's a page container on the page like this:

```html
<main class="js-warp-hide ... overflow-hidden position-relative">...</main>
```

If the `overflow-hidden` is removed the reflow-issue does not occur.
I'm just mentioning this to aid with debugging.

https://user-images.githubusercontent.com/7631673/153116454-5f5f126c-eafa-42bf-9f20-3676a320852e.mov

### Video of the issue occuring in our app, TurboTask (with the Flutter WebView):

FYI: In this video I added a `SafeArea`-widget around the `Builder` that holds the `WebView´.

https://user-images.githubusercontent.com/7631673/153116705-0f7da308-4c7d-44cd-96a0-c058b896a6e8.mov