flutter / flutter/flutter

[Android] View resize is not synchronized with the IME animation: content snaps after the keyboard finishes opening, and a blank gap is exposed while it closes

Open
#191,094 1 comment 1 reaction 0 assignees View on GitHub
found in release: 3.47 has reproducible steps p: webview p: webview-keyboard P1 package platform-android team-android triaged-android
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

Repro project: https://github.com/zabefofoon/flutter_keyboard_scroll_test

1. `flutter run` the project on a physical Android device.
2. The app is a full-screen `WebViewWidget` loading a bundled `assets/index.html` — a column with a fixed header, a scrollable list, and a text input pinned at the bottom of the page.
3. Tap the input at the bottom to raise the software keyboard.
4. Dismiss the keyboard.

Relevant configuration:

```xml

```

```dart
return Scaffold(
resizeToAvoidBottomInset: false,
body: SafeArea(
child: Stack(
children: [
WebViewWidget(controller: _controller),
if (_loading) const LinearProgressIndicator(),
],
),
),
);
```

### Expected results

The view geometry follows the IME animation frame by frame, the way Chrome for Android does: as the keyboard slides up the content moves with it, and as the keyboard slides down the content expands back in step with it. No intermediate frame should show an empty area where the keyboard used to be.

### Actual results

**Opening.** The keyboard slides all the way up while the content stays completely still. Only after the IME animation has finished does the content change, in a single step — the list jumps and the bottom input appears above the keyboard.

**Closing.** As the keyboard slides away, the view stays at its reduced size, so the area the keyboard occupied is exposed as a blank region. The view expands back to full height only after the IME animation has completed.

Frame-by-frame from the attached recording (sampled at 6 fps, 1080x2316, Android 16):

- Frames 13-15: keyboard rising, then fully extended — content unchanged the whole time (header + items 1..30, bottom input not visible).
- Frame 16: content changes in one step (items 15..30, input now above the keyboard).
- Frames 21-22: keyboard sliding down — content still in its raised position, blank area visible below it.
- Frame 23: content restored to full height.

Additional observations:

- The same lag appears with `resizeToAvoidBottomInset: true`; the resulting geometry differs, but the change still lands after the IME animation ends instead of tracking it.
- With `android:windowSoftInputMode="adjustPan"` the OS pans the window and that is smooth, but the page keeps the full viewport height, so it is not a workaround where the viewport needs to shrink.
- Applying the inset manually with `Transform.translate` driven by `MediaQuery.viewInsetsOf(context).bottom` *does* follow the animation smoothly. That suggests the animated inset values reach the framework in time, and the lag is in when the resize is applied to the view. That workaround only translates the view, though, so it cannot re-lay out the page.

**Not yet verified:** the content under test is a `WebViewWidget` (an Android platform view). I have not checked whether the same lag reproduces with a pure Flutter widget tree and no platform view, so this may be specific to platform view resizing.

### Code sample

Full reproducible project: https://github.com/zabefofoon/flutter_keyboard_scroll_test

Code sample

`android/app/src/main/AndroidManifest.xml`

```xml

```

`lib/main.dart`

```dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

const localPage = 'assets/index.html';

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'keyboard scroll test',
home: const HomePage(),
);
}
}

class HomePage extends StatefulWidget {
const HomePage({super.key});

@override
State createState() => _HomePageState();
}

class _HomePageState extends State {
late final WebViewController _controller;
bool _loading = true;

@override
void initState() {
super.initState();
_controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setNavigationDelegate(
NavigationDelegate(
onPageStarted: (_) => setState(() => _loading = true),
onPageFinished: (_) => setState(() => _loading = false),
),
)
..loadFlutterAsset(localPage);
}

@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: SafeArea(
child: Stack(
children: [
WebViewWidget(controller: _controller),
if (_loading) const LinearProgressIndicator(),
],
),
),
);
}
}
```

`assets/index.html` — a column with a fixed header, a scrollable list, and a textarea pinned at the bottom:

```html


header




```

```css
.page { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.header { flex: none; height: 52px; }
.list { flex: 1; min-height: 0; overflow-y: auto; }
.composer { flex: none; width: 100%; }
```

Dependency: `webview_flutter: ^4.14.1`

### Screenshots or Video

Screenshots / Video demonstration

https://github.com/user-attachments/assets/cf9036cd-d9f7-4cb5-a4cd-968c1fcab069

### Logs

Logs

No exception is thrown and nothing is logged while the bug happens — the problem is purely a timing/visual one, so there is no relevant log output to attach.

### Flutter Doctor output

Doctor output

```console
[✓] Flutter (Channel stable, 3.47.0, on macOS 26.5.2 25F84 darwin-arm64, locale ko-KR)
• Flutter version 3.47.0 on channel stable at /Users/rowan/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 4cf2416426 (2 days ago), 2026-08-11 11:53:49 -0700
• Engine revision 5f77625673
• Dart version 3.13.0
• DevTools version 2.60.0

[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0)
• Android SDK at /Users/rowan/Library/Android/sdk
• Platform android-36, build-tools 36.0.0
• Java version OpenJDK Runtime Environment (build 21.0.8+-14196175-b1038.72)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 26.2)
• Build 17C52
• CocoaPods version 1.17.0

[✓] Chrome - develop for the web

[✓] Connected device (4 available)
• SM S908N (mobile) • R3CT7051DSK • android-arm64 • Android 16 (API 36)

[✓] Network resources

• No issues found!
```

Contributor guide

Open the contributing guide

Research direction

Start with the Android reproduction using lib/main.dart, assets/index.html, and the adjustResize configuration, then compare the WebViewWidget behavior while the IME opens and closes. Verify whether the lag occurs only with the platform view or also with a pure Flutter widget tree. Done means the view follows each IME animation frame without snapping or exposing a blank gap.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, css, dart, flutter, html
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.