flutter / flutter/flutter

[Web] IME's conversion target background display and caret display position is misaligned

Open
#149,979 3 comments 6 reactions 0 assignees View on GitHub
a: internationalization a: text input found in release: 3.22 found in release: 3.23 has reproducible steps P2 platform-web team-web triaged-web
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

1. run `flutter run -d chrome`
2. Copy the localhost url and paste the copied URL into the address bar of the ios simulator's safari
3. Enter text in the text field

### Expected results

The background display of the IME conversion target and the caret display are not misaligned.

### Actual results

IME's conversion target background display and caret display position is misaligned. Web in iOS, Android

It is working fine when built for iOS

### Code sample

Code sample

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

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

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

@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: TextField(maxLines: 5),
),
);
}
}

```

### Screenshots or Video

Screenshots / Video demonstration

https://github.com/flutter/flutter/assets/16481886/d4e11e98-a806-42a3-b33b-e1c0fb2d712c

### Logs

Logs

[log.txt](https://github.com/user-attachments/files/15755044/log.txt)

### Flutter Doctor output

Doctor output

```console
[✓] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-arm64, locale en-JP)
• Flutter version 3.22.2 on channel stable at /Users/narumi/fvm/versions/3.22.2
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 761747bfc5 (4 days ago), 2024-06-05 22:15:13 +0200
• Engine revision edd8546116
• Dart version 3.4.3
• DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/narumi/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.6+0-17.0.6b829.9-10027231)
• All Android licenses accepted.

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

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

[✓] Android Studio (version 2022.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 17.0.6+0-17.0.6b829.9-10027231)

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

[✓] Connected device (4 available)
• iPhone 15 Pro Max (mobile) • CFB4719B-37A6-48F9-964A-FE2ECE612A52 • ios • com.apple.CoreSimulator.SimRuntime.iOS-17-5 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 14.5 23F79 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.5 23F79 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 125.0.6422.142

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

• No issues found!
```

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.