[WEB] Rendering issue after opening keyboard on IOS #101288

oleg-lysenko · 2022-04-04T12:22:00Z

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

Execute flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0 on the code sample
Copy the address and open it in a mobile browser
Click on any input field to display the on-screen keyboard
Try scrolling up or down
Close the on-screen keyboard
Try scrolling up or down again

Expected results:

Screen.Recording.2022-04-04.at.14.11.57.mov

Actual results:

Screen.Recording.2022-04-04.at.14.45.41.mov

2.mov

Code sample `main.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(),
        ),
      ),
    );
  }
}

Logs

[✓] 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!

The text was updated successfully, but these errors were encountered:

maheshmnj · 2022-04-04T13:41:16Z

Hi @oleg-lysenko, Thanks for filing the issue. I was able to reproduce the issue on the latest stable 2.10.4 and the master channel. This issue manifests on only specific devices randomly. I was able to reproduce this issue on web with Iphone 13 simulator and works fine as a native IOS app.

IOS	Android
Screen.Recording.2022-04-04.at.6.51.28.PM.mov	Screen.Recording.2022-04-04.at.6.47.02.PM.mov

However, on the master channel looks like there is some severe issue the ios app is completely frozen and not interactable at all while the andoid app works fine.

Verified on Iphone 13, iPhone 12 pro, iPhone se 2nd generation simulators.

Screen.Recording.2022-04-04.at.6.58.57.PM.mov

flutter doctor -v (mac)

[✓] Flutter (Channel stable, 2.10.4, on macOS 12.3 21E230 darwin-arm, locale en-GB)
    • Flutter version 2.10.4 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c860cba910 (3 days ago), 2022-03-25 00:23:12 -0500
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • 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.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.65.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.37.20220301

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.2:55555                    • android-arm64  • Android 11 (API 30)
    • iPhone 12 Pro (mobile) • 535317A4-921C-488F-B234-C2CC6D4AE5A1 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.3 21E230 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 99.0.4844.83

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[✓] Flutter (Channel master, 2.13.0-0.0.pre.357, on macOS 12.3 21E230 darwin-arm, locale en-IN)
    • Flutter version 2.13.0-0.0.pre.357 at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7971b412c1 (3 days ago), 2022-04-01 05:31:08 -0400
    • Engine revision c3274494b0
    • Dart version 2.17.0 (build 2.17.0-261.0.dev)
    • DevTools version 2.12.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! CocoaPods 1.10.2 out of date (1.11.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on
        the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • 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.11+0-b60-7772763)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.65.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.37.20220301

[✓] Connected device (6 available)
    • Redmi K20 Pro (mobile)              • 192.168.1.2:5555                     • android-arm64  • Android 11 (API 30)
    • iPhone 13 (mobile)                  • 3484B4E8-D7BB-40B0-96BF-97334A7F6CB6 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator)
    • iPhone SE (2nd generation) (mobile) • 201FC630-E245-462D-B8B3-F46807698AC0 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • iPhone 12 Pro (mobile)              • 535317A4-921C-488F-B234-C2CC6D4AE5A1 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)                     • macos                                • darwin-arm64   • macOS 12.3 21E230
      darwin-arm
    • Chrome (web)                        • chrome                               • web-javascript • Google Chrome
      100.0.4896.60

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

cc: @yjbanov

soloxiao · 2022-12-28T07:47:58Z

Any update on this issue?

huycozy · 2024-05-08T11:26:20Z

Checking this issue on my device iPhone 7, iOS 15.8 and iPhone 15 Pro, iOS 17.2 (emulator), I don't see the undefined area (blue color) appear but I can see the Scaffold's background (orange color) sticks for a while when the keyboard is dismissed and then it disappears. This behavior doesn't appear on (Android and iOS)'s Chrome browser.

Demo

Screen.Recording.2024-05-08.at.18.20.33.mov

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.19.6, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.6 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (31 hours ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.88.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.86.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.124

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.22.0-25.0.pre.5, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.22.0-25.0.pre.5 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider
      adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding
      /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 3a837bd584 (72 minutes ago), 2024-05-06 23:03:25 -0400
    • Engine revision b7bfd94af7
    • Dart version 3.5.0 (build 3.5.0-131.0.dev)
    • DevTools version 2.35.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.88.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.86.0

[✓] Connected device (3 available)
    • iPhone (mobile) • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.8 19H370
    • macOS (desktop) • macos                                    • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome                                   • web-javascript • Google Chrome 124.0.6367.119

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

I don't have such similar devices as above comments to check this but I will update issue's labels since the result on iOS's Safari browser is not similar to (Android and iOS)'s Chrome browser.

maheshmnj added the in triage Presently being triaged by the triage team label Apr 4, 2022

maheshmnj changed the title ~~[WEB] Rendering and scrolling issue after opening on-screen keyboard in mobile browser~~ [WEB] Rendering and scrolling issue after opening keyboard on IOS Apr 4, 2022

maheshmnj changed the title ~~[WEB] Rendering and scrolling issue after opening keyboard on IOS~~ [WEB] Rendering issue after opening keyboard on IOS Apr 8, 2022

darshankawar added the a: text input Entering text in a text field or keyboard related problems label Apr 8, 2022

yjbanov added the P2 Important issues not at the top of the work list label May 5, 2022

flutter-triage-bot bot added multiteam-retriage-candidate team-framework Owned by Framework team triaged-framework Triaged by Framework team labels Jul 8, 2023

Hixie removed the multiteam-retriage-candidate label Mar 6, 2024

huycozy added found in release: 3.19 Found to occur in 3.19 found in release: 3.22 Found to occur in 3.22 and removed found in release: 2.10 Found to occur in 2.10 found in release: 2.13 Found to occur in 2.13 labels May 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WEB] Rendering issue after opening keyboard on IOS #101288

[WEB] Rendering issue after opening keyboard on IOS #101288

oleg-lysenko commented Apr 4, 2022 •

edited by maheshmnj

Loading

maheshmnj commented Apr 4, 2022

soloxiao commented Dec 28, 2022

huycozy commented May 8, 2024

[WEB] Rendering issue after opening keyboard on IOS #101288

[WEB] Rendering issue after opening keyboard on IOS #101288

Comments

oleg-lysenko commented Apr 4, 2022 • edited by maheshmnj Loading

Steps to Reproduce

maheshmnj commented Apr 4, 2022

soloxiao commented Dec 28, 2022

huycozy commented May 8, 2024

oleg-lysenko commented Apr 4, 2022 •

edited by maheshmnj

Loading