Typing in different language other than English in multilines textfield makes letters shake.

[criticalx7]

Steps to Reproduce

1. Run Flutter Gallery in examples project in Flutter SDK.
2. Navigate to Material -> Text Fields
3. Try typing in Life Story (Multilines TextField) in different languages such as Thai or Japanese causing the letters to shake. The shaking stop when type to the second line. Select the text at first line when its have multiple lines also cause the bug. This bugs seems to only appear when build on both IOS Simulator and real device.

Example

No issues found! (ran in 5.5s)

[✓] Flutter (Channel stable, v1.7.8+hotfix.4, on Mac OS X 10.14.5 18F132, locale en-TH)
    • Flutter version 1.7.8+hotfix.4 at /Users/chatchapol/sdk/flutter
    • Framework revision 20e59316b8 (4 weeks ago), 2019-07-18 20:04:33 -0700
    • Engine revision fee001c93f
    • Dart version 2.4.0

 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/chatchapol/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 10.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.2.1, Build version 10E1001
    • CocoaPods version 1.7.5

[✓] iOS tools - develop for iOS devices
    • ios-deploy 1.9.4

[✓] Android Studio (version 3.4)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 35.2.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

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

[✓] Connected device (1 available)

[HansMuller]

CC @GaryQian

[criticalx7]

We discovered this when we're developing chat product with multilines TextField. We try different fonts from Google Font but it seems the problem still persists.

The only fix we found is to try change the height property of TextStyle for each language's font. it only minimize the shake tho.

It seems that make multilines TextField that we expect to be typing in different language using font of that language and set line height to 1.05 seems to temporary fix the problem. Maybe when it's fallback to system font the line height get mess up.

[GaryQian]

cc @justinmc this seems similar to the bouncing text problems we have seen before right? Let me repro first and see if I can find the relevant other issues.

[GaryQian]

Yeah, I believe this is due to the top edge of lines (from ascent) extending up past the origin of the text itself beyond y-coordinate zero. This makes the field act as if the text was scrolled down slightly, and the bounce is the dampened animation to return the text back to origin position.

The origin of this is from the rounding of the y-positions of lines to integer values during layout, which we are planning on removing soon.

[justinmc]

Here's one I saw recently that was caused by TextStyle's height. I think it's the same as this one. #37377

Can we just wait for the rounding fix then?

[GaryQian]

I'm verifying that rounding is indeed the cause... Preliminary experiments indicate that this instance may not be due to rounding after all.

[GaryQian]

The clamp PR (#38573) should fix this behavior.

[github-actions]

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 flutter doctor -v and a minimal reproduction of the issue.