Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextFormField scroll content show afterimage in IOS device #108590

Closed
zhongkai886 opened this issue Jul 29, 2022 · 12 comments
Closed

TextFormField scroll content show afterimage in IOS device #108590

zhongkai886 opened this issue Jul 29, 2022 · 12 comments
Assignees
Labels
c: rendering UI glitches reported at the engine/skia rendering level f: scrolling Viewports, list views, slivers, etc. found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 has reproducible steps The issue has been confirmed reproducible and is ready to work on platform-ios iOS applications specifically r: fixed Issue is closed as already fixed in a newer version

Comments

@zhongkai886
Copy link

zhongkai886 commented Jul 29, 2022

Steps to Reproduce

  1. Execute flutter run on the code sample .
  2. TextFormField content have emoji fill max Line , scroll content will show afterimage in IOS device .
  3. debug console can't see any error or message.

Expected results:
like OfficialSample
can scroll content and watch normal over content

Actual results:
content will show afterimage in IOS device

RPReplay_Final1659000932.mov
Code sample
TextFormField(
         maxLines: 3,
         decoration: const InputDecoration(
                 icon: Icon(Icons.person),
                 hintText: 'What do people call you?',
                 labelText: 'Name *',
         ),
         onSaved: (String? value) {
                 // This optional block of code can be used to run
                 // code when the user saves the form.
          },
          validator: (String? value) {
                   return (value != null &&
                               value.contains('@'))
                                ? 'Do not use the @ char.'
                                : null;
          },
),
Logs
no crash or exception
have no errors in analysis.
[✓] Flutter (Channel stable, 2.10.5, on macOS 12.4 21F79 darwin-x64, locale zh-Hant-TW)
• Flutter version 2.10.5 at /Users/kenny/Desktop/development/flutter
• Upstream repository [https://github.com/flutter/flutter.git](https://github.com/flutter/flutter.git)
• Framework revision 5464c5bac7 (3 個月前), 2022-04-18 09:55:37 -0700
• Engine revision 57d3bac3dd
• Dart version 2.16.2
• DevTools version 2.9.2

[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
• Android SDK at /Users/kenny/Library/Android/sdk
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See [https://developer.android.com/studio/command-line](https://developer.android.com/studio/command-line) for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See [https://flutter.dev/docs/get-started/install/macos#android-setup](https://flutter.dev/docs/get-started/install/macos#android-setup) for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 [https://plugins.jetbrains.com/plugin/9212-flutter](https://plugins.jetbrains.com/plugin/9212-flutter)
• Dart plugin can be installed from:
🔨 [https://plugins.jetbrains.com/plugin/6351-dart](https://plugins.jetbrains.com/plugin/6351-dart)
• Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)

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

[✓] Connected device (4 available)
• Pixel 3a (mobile)  • android-arm64  • Android 12 (API 32)
• reddyme (mobile)  • ios            • iOS 15.4 19E241
• iPhone 8 (mobile) • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-5 (simulator)
• Chrome (web)      • chrome                               • web-javascript • Google Chrome 103.0.5060.134

[✓] HTTP Host Availability
• All required HTTP hosts are available
@exaby73 exaby73 added the in triage Presently being triaged by the triage team label Jul 29, 2022
@exaby73
Copy link
Member

exaby73 commented Jul 29, 2022

Hello @zhongkai886. Looks like you're using Flutter Channel stable, 2.10.5. Can you upgrade to the latest stable and confirm if the issue still persists?

@exaby73 exaby73 added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jul 29, 2022
@zhongkai886
Copy link
Author

already upgrade version 3.0.5 , but emoji afterimage still appear.

[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale zh-Hant-TW)
[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.68.1)
[✓] Connected device (4 available)
[✓] HTTP Host Availability

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jul 29, 2022
@exaby73
Copy link
Member

exaby73 commented Jul 29, 2022

Thank you @zhongkai886. I can reproduce this issue in stable and master.

Video
108590_ios_master.mov
Code sample
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    controller.text = '🙂' * 40;
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SizedBox(
          height: 60,
          child: TextFormField(
            controller: controller,
            maxLines: null,
          ),
        ),
      ),
    );
  }
}
flutter doctor -v (Stable)
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-arm, locale en-US)
    • Flutter version 3.0.5 at /Users/nabeelparkar/fvm/versions/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (2 weeks ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nabeelparkar/Library/Android/sdk/
    • Platform android-33, build-tools 33.0.0
    • ANDROID_SDK_ROOT = /Users/nabeelparkar/Library/Android/sdk/
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.3)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 69.0.4
    • Dart plugin version 221.5921.27

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Brave Browser 103.1.41.100

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
flutter doctor -v (Master)
[✓] Flutter (Channel master, 3.1.0-0.0.pre.1961, on macOS 12.4 21F79 darwin-arm, locale en-US)
    • Flutter version 3.1.0-0.0.pre.1961 on channel master at /Users/nabeelparkar/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 762c92ead9 (2 hours ago), 2022-07-28 20:48:05 -0700
    • Engine revision 0113223261
    • Dart version 2.19.0 (build 2.19.0-43.0.dev)
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nabeelparkar/Library/Android/sdk/
    • Platform android-33, build-tools 33.0.0
    • ANDROID_SDK_ROOT = /Users/nabeelparkar/Library/Android/sdk/
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13F100
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.3)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 69.0.4
    • Dart plugin version 221.5921.27

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Brave Browser 103.1.41.100

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

@exaby73 exaby73 added a: text input Entering text in a text field or keyboard related problems platform-ios iOS applications specifically framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. has reproducible steps The issue has been confirmed reproducible and is ready to work on found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 f: scrolling Viewports, list views, slivers, etc. and removed in triage Presently being triaged by the triage team labels Jul 29, 2022
@LongCatIsLooong LongCatIsLooong added c: rendering UI glitches reported at the engine/skia rendering level and removed framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. a: text input Entering text in a text field or keyboard related problems labels Aug 31, 2022
@LongCatIsLooong
Copy link
Contributor

I can reproduce that with a Text Widget, and the visual artifacts persist through hot reload. However when there's background color / decorations it works fine.

      final emoji = '🙂' * 100;

      Center(
        child: Container(
          height: 50,
          color: Colors.white,
          child: SingleChildScrollView(
            clipBehavior: Clip.none,
            child: Text(emoji),
            //child: Text(emoji, style: DefaultTextStyle.of(context).style.copyWith(backgroundColor: Colors.white)),
          ),
        )
      );

image

@jason-simmons any chance you could take a look?

@jason-simmons
Copy link
Member

This is happening because the bounds rectangle calculated for the emoji text is inaccurate.

The Flutter compositor then uses the text bounds to compute the damage rectangle affected by the animation. The resulting damage rect is too small, causing content from the previous frame to remain after the new frame is painted.

The text bounds are taken from Skia's SkTextBlob.bounds().
SkTextBlobBuilder::updateDeferredBounds is using the ConservativeRunBounds implementation, which is based on metrics returned by the SkTypeface that are intended to cover the entire font. It looks like those metrics are not correct for all glyphs in the AppleColorEmoji font.

I can get this issue to disappear by patching SkTextBlobBuilder::updateDeferredBounds to use TightRunBounds, which queries the bounds for the specific glyphs in the text run.

@bungeman @Rusino What would be the best way to handle this? Would it make sense for Skia to select TightRunBounds for emoji fonts where the metrics are potentially unreliable?

@bungeman
Copy link

Hmmm... yes, the conservative bounds technically only apply to the (non-variable) glyph outlines, not necessarily to the bitmaps (though in theory they should). We already have a means for the actual underlying port to state that the conservative bounds are bogus and should not be used. It looks like perhaps the CoreText port should state that the conservative bounds are bogus if at least some glyphs in the font are not going to be drawn from paths (the font has an sbix, SVG , or COLR table).

@bungeman
Copy link

Created https://skia-review.googlesource.com/c/skia/+/585421 which should address this issue.

pull bot pushed a commit to TheRakeshPurohit/skia that referenced this issue Sep 28, 2022
The conservative font bounds reported by CoreText are those in the font
and are meant primarially for (and are generally calculated only for)
the default instance of the glyph outlines in the font. In particular
they do not generally apply to `sbix` and `SVG ` data. When these tables
are present the conservative font bounds reported by the font should be
considered invalid since glyph representations used may not be outlines.

Bug: flutter/flutter#108590
Change-Id: I9d591e4327839f0660413683bcc223d6b76849ef
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/585421
Commit-Queue: Ben Wagner <bungeman@google.com>
Reviewed-by: Herb Derby <herb@google.com>
@jason-simmons
Copy link
Member

Verified that https://skia-review.googlesource.com/c/skia/+/585421 fixes this

@bungeman
Copy link

The Skia change is rolled into Flutter with flutter/engine#36475 .

@exaby73
Copy link
Member

exaby73 commented Sep 29, 2022

Since flutter/engine#36475 is merged, marking this issue as fixed.

@exaby73 exaby73 added the r: fixed Issue is closed as already fixed in a newer version label Sep 29, 2022
@exaby73 exaby73 closed this as completed Sep 29, 2022
@zhongkai886
Copy link
Author

awesome thanks guys

@github-actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 17, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
c: rendering UI glitches reported at the engine/skia rendering level f: scrolling Viewports, list views, slivers, etc. found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 has reproducible steps The issue has been confirmed reproducible and is ready to work on platform-ios iOS applications specifically r: fixed Issue is closed as already fixed in a newer version
Projects
None yet
Development

No branches or pull requests

5 participants