[Flutter-Web] text field selection on mobile web on iOS has visual discrepancy #68692
Description
Steps to Reproduce
Running on Chrome/Safari on iOS 14.0.1
Reproducable Code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
resizeToAvoidBottomInset: false,
body: Center(
child: TextField(),
),
),
);
}
}
The bug
When selecting on iOS produces the following result:
As if the selection is positioned with some offset.
Screenshot
The reason this is not reproducable in the Gallery is the use of a different font.
Changing the code to be more similar to the Gallery text field no longer produces the bug (though this feels like a workaround)
Workaround
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: _buildCraneTextTheme(ThemeData.light().textTheme),
),
home: Scaffold(
resizeToAvoidBottomInset: false,
body: Center(
child: TextField(),
),
),
);
}
}
TextTheme _buildCraneTextTheme(TextTheme base) {
return GoogleFonts.ralewayTextTheme(
base.copyWith(
headline1: base.headline1.copyWith(
fontWeight: FontWeight.w300,
fontSize: 96,
),
headline2: base.headline2.copyWith(
fontWeight: FontWeight.w400,
fontSize: 60,
),
headline3: base.headline3.copyWith(
fontWeight: FontWeight.w600,
fontSize: 48,
),
headline4: base.headline4.copyWith(
fontWeight: FontWeight.w600,
fontSize: 34,
),
headline5: base.headline5.copyWith(
fontWeight: FontWeight.w600,
fontSize: 24,
),
headline6: base.headline6.copyWith(
fontWeight: FontWeight.w600,
fontSize: 20,
),
subtitle1: base.subtitle1.copyWith(
fontWeight: FontWeight.w500,
fontSize: 16,
// letterSpacing: letterSpacingOrNone(0.5),
),
subtitle2: base.subtitle2.copyWith(
fontWeight: FontWeight.w600,
fontSize: 12,
// color: craneGrey,
),
bodyText1: base.bodyText1.copyWith(
fontWeight: FontWeight.w500,
fontSize: 16,
),
bodyText2: base.bodyText2.copyWith(
fontWeight: FontWeight.w400,
fontSize: 14,
),
button: base.button.copyWith(
fontWeight: FontWeight.w600,
fontSize: 13,
// letterSpacing: letterSpacingOrNone(0.8),
),
caption: base.caption.copyWith(
fontWeight: FontWeight.w500,
fontSize: 12,
// color: craneGrey,
),
overline: base.overline.copyWith(
fontWeight: FontWeight.w600,
fontSize: 12,
),
),
);
}
Logs
[✓] Flutter (Channel beta, 1.23.0-18.1.pre, on Linux, locale en_US.UTF-8)
• Flutter version 1.23.0-18.1.pre at /home/alex/dev/flutter
• Framework revision 198df796aa (6 days ago), 2020-10-15 12:04:33 -0700
• Engine revision 1d12d82d9c
• Dart version 2.11.0 (build 2.11.0-213.1.beta)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at /home/alex/Android/Sdk
• Platform android-30, build-tools 29.0.2
• Java binary at: /home/alex/android-studio/jre/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at google-chrome
[✓] Android Studio (version 4.0)
• Android Studio at /home/alex/android-studio
• Flutter plugin version 50.0.1
• Dart plugin version 193.7547
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
[✓] IntelliJ IDEA Community Edition (version 2020.1)
• IntelliJ at /home/alex/idea-IC-201.7223.91
• Flutter plugin version 45.1.3
• Dart plugin version 201.7223.99
[✓] VS Code (version 1.50.0)
• VS Code at /usr/share/code
• Flutter extension version 3.10.2
[✓] Connected device (2 available)
• Web Server (web) • web-server • web-javascript • Flutter Tools
• Chrome (web) • chrome • web-javascript • Google Chrome 86.0.4240.75
• No issues found!