[web] Text is clipped on some browsers in TextField and Text Widget #61614
Labels
a: text input
Entering text in a text field or keyboard related problems
a: typography
Text rendering, possibly libtxt
browser: firefox
only manifests in Firefox
c: rendering
UI glitches reported at the engine/skia rendering level
e: web_html
HTML rendering backend for Web
engine
flutter/engine repository. See also e: labels.
framework
flutter/packages/flutter repository. See also f: labels.
P2
Important issues not at the top of the work list
platform-web
Web applications specifically
Comments
GaryQian
added
a: text input
yjbanov
added
e: web_html
|
/cc @mdebbar wondering if there's something with text measurement in FF |
|
I got to reproduce this on my GitHub Page (source here) and, as someone mentioned here, this issue disappears if you change your user agent to a Chrome one |
|
Hi @UnicornsOnLSD
Code Sampleflutter doctor -vCan you upgrade to Thank you |
TahaTesser
added
waiting for customer response
|
I also experience the same issue on Flutter 1.21.0-5.0.pre • channel master.
|
|
I just tried again on latest master with the same results. |
no-response
bot
removed
the
waiting for customer response
|
The bug is on Firefox Windows but not on Firefox macOS |
|
I find that this issue occur both on Windows in both Firefox and Chrome. It is just more that is clipped off in Firefox. I've updated the bug_report zip a bit with a default text of "yjqg" and I added a Text() because I have found that the clipping does not just occur in text fields but also in Text(). Firefox on Windows
Chrome on Windows
|
|
If anyone needs a quick workaround for this, enabling the Skia renderer by building with |
|
@UnicornsOnLSD do you manage to get another solution without using this quick workaround? I've been seeing this issue occur in mobile Chrome browsers both on iOS and Andriod devices |
|
I haven't found any other way of fixing this yet :( |
|
We are also encountering this issue. Any updates coming soon? Firefox version: 80.0.1 (64-bit) Example: We also tried using the skia engine, but it breaks a lot of other stuff. |
I've been doing bunch research. havent find anything besides using the skia enger |
|
The same problem, Firefox 81.0b9 developer edition on Windows, Flutter 1.22.0-12.1.pre |
|
It also appears to not only be limited to Firefox which the tagging indicate. (see my post above about reproduction on Chrome on Windows) |
|
@Leffe108 yes I've seen it on Chrome as well. Can we get some more 👀 in here? |
|
I'm still unable to reproduce this on chrome as well code sampleimport 'package:flutter/material.dart';
void main() {
runApp(BugReport());
}
class BugReport extends StatelessWidget {
const BugReport({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MainScreen(),
);
}
}
class MainScreen extends StatefulWidget {
MainScreen({Key key}) : super(key: key);
@override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
static const DEBUG_TEXT = 'yjqg';
TextEditingController _controller = TextEditingController(text: DEBUG_TEXT);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Bug Report"),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(DEBUG_TEXT),
TextField(
controller: _controller,
),
Spacer(),
],
),
),
);
}
}
flutter doctor -v[✓] Flutter (Channel master, 1.22.0-10.0.pre.281, on Mac OS X 10.15.6 19G2021
x86_64, locale en-GB)
• Flutter version 1.22.0-10.0.pre.281 at
/Users/tahatesser/Code/flutter_master
• Framework revision 511367aa5a (15 hours ago), 2020-09-21 15:33:32 -0700
• Engine revision 4b8477d115
• Dart version 2.10.0 (build 2.10.0-142.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/tahatesser/Code/sdk
• Platform android-30, build-tools 30.0.2
• ANDROID_HOME = /Users/tahatesser/Code/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-6222593)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 12.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.0, Build version 12A7209
• CocoaPods version 1.9.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.0)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 49.0.2
• Dart plugin version 193.7547
• Java version OpenJDK Runtime Environment (build
1.8.0_242-release-1644-b3-6222593)
[✓] VS Code (version 1.49.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.14.1
[✓] Connected device (4 available)
• RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64 • Android 10 (API 29)
• macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.6
19G2021 x86_64
• Web Server (web) • web-server • web-javascript • Flutter Tools
• Chrome (web) • chrome • web-javascript • Google Chrome
85.0.4183.102
• No issues found!I’m unable to reproduce the issue to pinpoint the cause, but there are reports from several users. The issue needs further investigation. |
TahaTesser
changed the title
TahaTesser
added
framework
|
@TahaTesser I meant mobile Chrome. Also as of right now. I've seen it on iOS 14 mobile safari/chrome. mainly some characters will get cut off from a Text widget |
TahaTesser
changed the title
|
@TahaTesser It seems that you are on Mac. I'm on Windows 10. Maybe that is a factor. Would it provide any benefit of hosting a build from eg. master channel to have us test it, or test with a basic Windows 10 image in docker or CI/CD to rule out any dependency on fonts being installed by any software and also have something that can reproduce it? I realize I didn't post my flutter doctor -vFirefox 81.0
Chrome 85.0.4183.102
Chrome 85.0.4183.121
|
Hixie
removed
the
will need additional triage
|
I created a github repo using github action and puppeteer on windows 2019 server image. The workflow action do not reproduce the clipping of text. But when I run the same test |
|
I'm seeing the same issue. |
|
I am also seeing this issue on Firefox for Windows and NOT on Firefox for Mac, specifically g's and y's are cut off when typing in textfields flutter doctor -v
Firefox Mac
Firefox Windows
Unrelated but on Firefox Mac when typing in a textfield the cursor starts to move by more than 1 character length so after typing a sentence the cursor appears hundreds of pixels away |
|
Is this still an issue today with latest master or on the new stable version? |
mdebbar
added
the
waiting for customer response
|
Clipped text in Firefox is solved, The only problem that still exists is clipped text selection for "yjqg" characters for flutter build web --web-renderer html --release
flutter doctor
|
This comment has been minimized.
This comment has been minimized.
pedromassangocode
added
r: timeout
TahaTesser
removed
the
r: timeout
|
Is this still an issue? There should be no more clipping of text. |
mdebbar
added
the
waiting for customer response
|
I haven't noticed this for a while now, at least since Flutter 2.8. Closing :) |
github-actions
bot
removed
the
waiting for customer response
|
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 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Steps to Reproduce
flutter run.Expected results:
This:
This was taken on Firefox with a useragent switcher.
Actual results:
This:
This was taken on Firefox without any useragent modifications.
Logs
Additional notes:
This same issue was reported and fixed in #49946, flutter/engine#16994. The issue seems to have come back. The issue is present in both beta and master.
The text was updated successfully, but these errors were encountered: