Repository: flutter
Issue: [WEB] Rendering issue after opening keyboard on IOS 
Labels: a: text input,e: device-specific,platform-ios,framework,platform-web,c: rendering,has reproducible steps,P2,browser: safari-ios,team-framework,triaged-framework,found in release: 3.19,found in release: 3.22

<!-- Thank you for using Flutter!

     If you are looking for support, please check out our documentation
     or consider asking a question on Stack Overflow:
      * https://flutter.dev/
      * https://api.flutter.dev/
      * https://stackoverflow.com/questions/tagged/flutter?sort=frequent

     If you have found a bug or if our documentation doesn't have an answer
     to what you're looking for, then fill out the template below. Please read
     our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

Hello!

I'm having a few issues going on in a mobile browser. 
When I open the application in a mobile browser iOS or Android during the scroll, some widgets disappear that are in the tree below the input elements. 
When you close the on-screen keyboard, an undefined area appears at the bottom of the screen, always the same height. Sometimes it appears when chaotically scrolling up or down after opening / closing the on-screen keyboard.

## Steps to Reproduce

<!-- Please include full steps to reproduce so that we can reproduce the problem. -->

1. Execute `flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0` on the code sample <!-- (see "Code sample" section below) -->
2. Copy the address and open it in a mobile browser
2. Click on any input field to display the on-screen keyboard
3. Try scrolling up or down
4. Close the on-screen keyboard
5. Try scrolling up or down again

**Expected results:** <!-- what did you want to see? -->

https://user-images.githubusercontent.com/61043519/161536723-7d9af24e-8bf0-47fd-a27f-8a1a6e87a665.mov


**Actual results:** <!-- what did you see? -->

<img src="https://user-images.githubusercontent.com/61043519/161541207-ba72f85a-2f46-444d-969f-9ea5b1a2f4eb.png" width ="300"> 

https://user-images.githubusercontent.com/61043519/161541288-25a8e285-c28a-4aa0-b09c-b120b9c617de.mov

https://user-images.githubusercontent.com/61043519/161542086-fce642bb-910b-4110-9a22-cfcf3b000e40.mov



<details>
<summary>Code sample `main.dart`</summary>

<!--
      Please create a minimal reproducible sample that shows the problem
      and attach it below between the lines with the backticks.

      To create it you can use `flutter create bug` command and update the `main.dart` file.

      Alternatively, you can use https://dartpad.dev/
      which is capable of creating and running small Flutter apps.

      Without this we will unlikely be able to progress on the issue, and because of that
      we regretfully will have to close it.
-->

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange,
      appBar: AppBar(
        backgroundColor: Colors.cyanAccent,
        title: const Text('Title'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              color: Colors.yellow,
              height: 400,
            ),
            Container(
              color: Colors.red,
              height: 400,
              child: Column(
                children: [
                  _buildTextField(),
                  _buildTextField(),
                  _buildTextField(),
                  _buildTextField(),
                  _buildTextField(),
                ],
              ),
            ),
            Container(
              color: Colors.green,
              height: 200,
            ),
            Container(
              color: Colors.purple,
              height: 200,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTextField() {
    return Container(
      height: 50,
      margin: const EdgeInsets.only(left: 16, right: 16, top: 16),
      child: const TextField(
        decoration: InputDecoration(
          labelText: 'Enter Name',
          border: OutlineInputBorder(),
        ),
      ),
    );
  }
}
```

</details>

<details>
  <summary>Logs</summary>

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```
[✓] Flutter (Channel stable, 2.5.3, on macOS 11.6 20G165 darwin-x64, locale en-GB)
    • Flutter version 2.5.3 at /Users/oleh.lysenko/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (6 months ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/oleh.lysenko/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Users/oleh.lysenko/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7784292/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.1, Build version 13A1030d
    • CocoaPods version 1.11.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)

[✓] Android Studio (version 2020.3)
    • Android Studio at /Users/oleh.lysenko/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7784292/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)

[✓] VS Code (version 1.64.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.36.0

[✓] Connected device (2 available)
    • iPhone 13 mini (mobile) • 5ED71A0D-AB55-4C22-ABEE-DEFC00FEF36D • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • Chrome (web)            • chrome                               • web-javascript • Google Chrome 100.0.4896.60

• No issues found!
```

</details>


<!--
      Consider also attaching screenshots and/or videos to better
      illustrate the issue.

      You can upload them directly on GitHub.
      Beware that video file size is limited to 10MB.
-->