Web - total screen corruption when keyboard opens and scrolling up - iOS 13.4.1 and 14.3, iPad Pro

[slavap]

Steps to Reproduce

Column(children: [
        Expanded(
          child: Scrollbar(child: SingleChildScrollView(child: Column(children: _buildChildren(context))))

_buildChildren constructs Form with editing fields.

Just press on TextField to open on-screen keyboard.

Screen is getting corrupted, all items under opened keyboard are becoming "white blank"

flutter doctor -v
[√] Flutter (Channel dev, 1.19.0-3.0.pre, on Microsoft Windows [Version 10.0.16299.1087], locale en-US)
    • Flutter version 1.19.0-3.0.pre at c:\Programs\flutter
    • Framework revision 6135091de9 (21 hours ago), 2020-06-01 17:17:03 -0700
    • Engine revision e39301f23f
    • Dart version 2.9.0 (build 2.9.0-13.0.dev 6489a0c68d)


[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at C:\Users\slavap\AppData\Local\Android\sdk
    • Platform android-29, build-tools 29.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[!] Android Studio (version 3.6)
    • Android Studio at C:\Program Files\Android\Android Studio
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)

[√] VS Code, 64-bit edition (version 1.45.1)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.11.0

[√] Connected device (3 available)
    • Android SDK built for x86 • emulator-5554 • android-x86    • Android 10 (API 29) (emulator)
    • Web Server                • web-server    • web-javascript • Flutter Tools
    • Chrome                    • chrome        • web-javascript • Google Chrome 83.0.4103.61

! Doctor found issues in 1 category.

[VladyslavBondarenko]

Reproduced with iOS 12.0

https://flkb.netlify.app/ - built with current master 1.19.0-4.0.pre.20.

https://flkb-beta.netlify.app/ - The same code sample built with current beta 1.18.0-11.1.pre

Code sample

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: ListView(
          children: List.generate(20, (index) => TextField(
            decoration: InputDecoration(
              labelText: index.toString(),
            ),
          )),
        )
      ),
    );
  }
}

Related to #58244

[nturgut]

Thanks for filing the issue. @VladyslavBondarenko thanks for the detailed comments.

I'll have a look tomorrow.

[nturgut]

I tried a lot of different combinations to test the issue. Including (13.1, 13.5, 12.1) simulators, IOS13 device and Chrome on Pixel 3. I used flutter master channel and the provided links (https://flkb-beta.netlify.app/ and https://flkb.netlify.app/, thanks @VladyslavBondarenko for providing these).

I was only able to produce the issue on iOS 12.1 Simulator. The area under the virtual keyboard corrupted as suggested in the description.

@slavap You see the issue on iOS 13 on the current master channel, right? I have a few questions:

• Is the chrome you use is also on an iOS device (Chrome on IOS will have webkit as the engine instead of blink)?
• What is the form factor? Are you using a phone or a pad?
• What is the screen orientation?

[slavap]

@nturgut

1. iOS 13.4.1, iPad Pro, dev channel 1.19.0-3.0.pre
2. Yes, Chrome on iOS, its engine I think the same as Safari.
3. iPad Pro 12.9 inches screen.
4. Tried both orientations, landscape and portrait. In portrait it is slightly better overall, though still screen corruption.

One more thing to add - if I continue to "play" with corrupted screen. i.e. scroll it up and down, after short period of time application is crashing and automatically reloaded by Safari.

[nturgut]

Hi @slavap, There was an issue I fixed lately: flutter/engine#18328 It went into flutter framework with engine roll: #57402 Can you check your flutter framework has this commit?

I'll try to generate it on an iOS13, iPad once you confirm.

Having said that I'll try to fix the issue in iOS12: #58705 I created a new issue since iOS12 has a different codepath. it does not support viewport API. (Edit: I see iOS12 already had an issue filed: #58244)

[slavap]

@nturgut I’m not sure how to check it. But dev channel is just few steps behind of master, so I think your commit in dev channel already. I’ll try to make demo project with minimal code to reproduce.

[nturgut]

You are right, I just thought as 'beta' for a second. If it is in dev it means, flutter/engine#18328 didn't fixed it.

I'm changing the issue title as iPad and Webkit engine.

Thanks again for filing the issue.

[slavap]

@nturgut
Here is the simple test project with corruption:
ioskeyb.zip

Hope it will help to reproduce problem for you.
I'm building with: flutter build web --release

[nturgut]

Thank you @slavap , I am able to generate the issue using your example.

[TahaTesser]

Hi @slavap
The code sample is no longer working and it is also using a third-party package.

I tried to reproduce using Flutter form example on iPad in Safari, I can't experience any issues

code sample

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: MyCustomForm(),
      ),
    );
  }
}

// Create a Form widget.
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  //
  // Note: This is a GlobalKey<FormState>,
  // not a GlobalKey<MyCustomFormState>.
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                // Validate returns true if the form is valid, or false
                // otherwise.
                if (_formKey.currentState.validate()) {
                  // If the form is valid, display a Snackbar.
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel beta, 1.25.0-8.3.pre, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.25.0-8.3.pre at /Users/tahatesser/Code/flutter_beta
    • Framework revision 5d36f2e7f5 (5 days ago), 2021-01-14 15:57:49 -0800
    • Engine revision 7a8f8ca02c
    • Dart version 2.12.0 (build 2.12.0-133.7.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.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 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (3 available)
    • Android SDK built for x86 (mobile) • emulator-5554             • android-x86    • Android 10 (API 29) (emulator)
    • Taha’s iPad (mobile)               • 00008020-000255113EE8402E • ios            • iOS 14.3
    • Chrome (web)                       • chrome                    • web-javascript • Google Chrome 87.0.4280.141

• No issues found!

[✓] Flutter (Channel master, 1.26.0-2.0.pre.402, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.26.0-2.0.pre.402 at /Users/tahatesser/Code/flutter_master
    • Framework revision 2a188eeca3 (33 hours ago), 2021-01-17 19:27:00 -0800
    • Engine revision 609036f2bf
    • Dart version 2.12.0 (build 2.12.0-236.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.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 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (4 available)
    • Android SDK built for x86 (mobile) • emulator-5554             • android-x86    • Android 10 (API 29) (emulator)
    • Taha’s iPad (mobile)               • 00008020-000255113EE8402E • ios            • iOS 14.3
    • macOS (desktop)                    • macos                     • darwin-x64     • macOS 11.1 20C69 darwin-x64
    • Chrome (web)                       • chrome                    • web-javascript • Google Chrome 87.0.4280.141

• No issues found!

Can you please provide a minimal complete reproducible code sample without using party packages
Thank you

[slavap]

@TahaTesser
I've retested with more up to date versions of Flutter (1.25.0-8.3.pre) and iOS 14.3
Still having this problem, but it is more complicated.
First the code, I'm building it as: flutter build web --release --web-renderer html
and deploying to web server.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        //home: MyHomePage(title: 'Flutter Demo Home Page'),
        builder: (BuildContext context, Widget child) {
          final MediaQueryData data = MediaQuery.of(context);
          var horzOffset = 100.0;
          var d = data.copyWith(
              padding: EdgeInsets.fromLTRB(horzOffset, data.padding.top, horzOffset, data.padding.bottom));
          return MediaQuery(
            data: d,
            child: Navigator(
              pages: [
                MaterialPage(
                  key: ValueKey('Page1'),
                  child: SafeArea(
                    child: MyHomePage(title: 'Flutter Demo Home Page'),
                  ),
                )
              ],
              onPopPage: (route, result) => route.didPop(result),
            ),
          );
        });
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Column(children: [
        Expanded(
          child: Scrollbar(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Container(padding: EdgeInsets.all(16), child: TextFormField()),
                  Container(padding: EdgeInsets.all(16), child: TextFormField()),
                  Container(padding: EdgeInsets.all(16), child: TextFormField()),
                  Container(padding: EdgeInsets.all(16), child: TextFormField()),
                  Container(padding: EdgeInsets.all(16), child: TextFormField()),
                  Container(padding: EdgeInsets.all(16), child: TextFormField()),
                  Container(padding: EdgeInsets.all(16), child: TextFormField()),
                  Container(padding: EdgeInsets.all(16), child: TextFormField()),
                  Container(padding: EdgeInsets.all(16), child: TextFormField()),
                  Container(padding: EdgeInsets.all(16), child: TextFormField()),
                  Container(padding: EdgeInsets.all(16), child: TextFormField()),
                  Container(padding: EdgeInsets.all(16), child: TextFormField()),
                ],
              ),
            ),
          ),
        ),
      ]),
    );
  }
}

Testing in landscape orientation. After app is opened just put cursor to any text field.

1. iPad Air 2 - works fine, no glitches.
2. Two different iPad Pro 12.9 (3rd generation) - both are having this corruption bug.

iOS and Safari versions are the same on all three devices.

Bug on iPads Pro looks like:

[TahaTesser]

Hi @slavap
Thanks for the details, I also cannot reproduce on iPad 8 running iOS 14.3

flutter doctor -v

[✓] Flutter (Channel beta, 1.25.0-8.3.pre, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.25.0-8.3.pre at /Users/tahatesser/Code/flutter_beta
    • Framework revision 5d36f2e7f5 (5 days ago), 2021-01-14 15:57:49 -0800
    • Engine revision 7a8f8ca02c
    • Dart version 2.12.0 (build 2.12.0-133.7.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.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 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile)     • EUYTFEUSQSRGDA6D          • android-arm64  • Android 10 (API 29)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios            • iOS 14.3
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 87.0.4280.141

• No issues found!

[slavap]

@TahaTesser My guess is that this bug clearly related to absence of physical Home button, i.e. occurs on devices with onscreen "swipe up" functionality.

[TahaTesser]

@slavap
That makes sense, mine has a home button on iPad 8

[danagbemava-nc]

I can't seem to reproduce this on the latest version of flutter stable using the code sample in #58528 (comment) on iOS 17.4 on an iPad Air (M1) [It doesn't have a home-button, which seems to be the type of device that reproduces the issue]. See the recording below.

RPReplay_Final1711017633.MP4

I'll be closing this as fixed since we haven't seen any reports or updates on this issue in a few years and I can't seem to reproduce it.

If anyone is still running into this issue, please file a new issue and provide all the relevant steps required to reproduce the issue so that it can be properly investigated.

Thank you

flutter doctor (stable)

[!] Flutter (Channel stable, 3.19.3, on macOS 14.3.1 23D60 darwin-arm64, locale en-GB)
    • Flutter version 3.19.3 on channel stable at /Users/nexus/dev/sdks/flutter
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ba39319843 (2 weeks ago), 2024-03-07 15:22:21 -0600
    • Engine revision 2e4ba9c6fb
    • Dart version 3.3.1
    • DevTools version 2.31.1
    • 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/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode-15.2.0.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.14.3

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

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

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

[✓] Connected device (3 available)
    • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios            • iOS 17.4 21E219
    • macOS (desktop)      • macos                     • darwin-arm64   • macOS 14.3.1 23D60 darwin-arm64
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 123.0.6312.58

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

! Doctor found issues in 1 category.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.