flutter / flutter/flutter

[webview_flutter] Multiple inputs in position: fixed elements freeze

Open
#156,272 6 comments 0 reactions 0 assignees View on GitHub
a: text input c: regression found in release: 3.24 found in release: 3.26 has reproducible steps p: webview P2 package platform-ios team-ios triaged-ios
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

1. Run the code sample on an iPhone 16 Pro with iOS 18 (Simulator works too)
2. Click "Continue" on the alert that the page is user-created
3. Click the first input element
4. Click the second input element
5. Click the third input element

### Expected results

The inputs work as normal:
- Should show a cursor
- Should be clickable
- Should allow text input

### Actual results

The second input doesn't show a cursor and the third input field can't be selected at all when trying to select one after the other.

### Code sample

Code sample

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

void main() => runApp(const MaterialApp(home: WebViewExample()));

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

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

class _WebViewExampleState extends State {
late final WebViewController controller;

@override
void initState() {
super.initState();

controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setBackgroundColor(const Color(0x00ff0000))
..setOnConsoleMessage((JavaScriptConsoleMessage message) {
print("[${message.level.name}] ${message.message}");
})
..setNavigationDelegate(
NavigationDelegate(
onNavigationRequest: (NavigationRequest request) {
print('NavigationRequest: ${request.url}');

return NavigationDecision.navigate;
},
),
)
..loadRequest(Uri.parse('https://webtoapp.w3spaces.com/pos-fixed-inputs.html'));
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter Simple Example')),
body: WebViewWidget(controller: controller),
);
}
}
```

If you don't want to use the w3schools test page, this is the full HTML:
```html











```

### Screenshots or Video

Screenshots / Video demonstration

Here's a video of how it should look **when it works correctly**. This was tested with a WKWebview, not webview_flutter, to show that the issue lies in the webview_flutter package.

https://github.com/user-attachments/assets/f8ddba04-68e6-4b79-8a83-0bbd03e867b1

### Logs

Logs

[run.txt](https://github.com/user-attachments/files/17266340/run.txt)

### Flutter Doctor output

Doctor output

```console
[✓] Flutter (Channel stable, 3.24.3, on macOS 15.0 24A335 darwin-x64, locale en-US)
• Flutter version 3.24.3 on channel stable at /Users/administrator/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 2663184aa7 (3 weeks ago), 2024-09-11 16:27:48 -0500
• Engine revision 36335019a8
• Dart version 3.5.3
• DevTools version 2.37.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/administrator/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• 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 16.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16A242d
• CocoaPods version 1.15.2

[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[✓] 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
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] Connected device (2 available)
• iPhone 16 Pro (mobile) • 98CC2EE2-66B2-49A0-852C-1390D3F4D39A • ios • com.apple.CoreSimulator.SimRuntime.iOS-18-0 (simulator)
• macOS (desktop) • macos • darwin-x64 • macOS 15.0 24A335 darwin-x64

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

! Doctor found issues in 1 category.

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.