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

[Impeller] Distorted text in Cupertino dialog #148588

Closed
thenixan opened this issue May 17, 2024 · 13 comments
Closed

[Impeller] Distorted text in Cupertino dialog #148588

thenixan opened this issue May 17, 2024 · 13 comments
Assignees
Labels
a: typography Text rendering, possibly libtxt c: regression It was better in the past than it is now c: rendering UI glitches reported at the engine/skia rendering level e: impeller Impeller rendering backend issues and features requests found in release: 3.22 Found to occur in 3.22 has reproducible steps The issue has been confirmed reproducible and is ready to work on P1 High-priority issues at the top of the work list team-engine Owned by Engine team triaged-engine Triaged by Engine team

Comments

@thenixan
Copy link

Steps to reproduce

  1. Have an application with MaterialApp.router
  2. One of the screens is calling a dialog with showAdaptiveDialog function
  3. Inside dialog implementation I have an if that explicitly uses CupertinoAlertDialog because the contents of the dialog requires an input so I use CupertinoTextField as well
  4. This also can be reproduced using AlertDialog.adaptive() call

Expected results

Fonts should not look distorted

Actual results

Fonts in Cupertino styled dialogs are distorted: titles, dialog actions and even the border of CupertinoTextField also looks distorted.

Code sample

Code sample
import 'dart:io';

import 'package:client_app/generated/l10n.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

Future<String?> showAccountDeletionDialog({required BuildContext context}) async {
  final result = await showAdaptiveDialog<String>(
    context: context,
    builder: (context) => const AccountDeletionConfirmationDialog(),
  );
  return result;
}

class AccountDeletionConfirmationDialog extends StatefulWidget {
  const AccountDeletionConfirmationDialog({super.key});

  @override
  State<StatefulWidget> createState() => _AccountDeletionConfirmationDialogState();
}

class _AccountDeletionConfirmationDialogState extends State<AccountDeletionConfirmationDialog> {
  final _passwordInputController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    if (Platform.isIOS || Platform.isMacOS) {
      return CupertinoAlertDialog(
        title: Text(S.of(context).accountDeletionConfirmationHint),
        content: CupertinoTextField(
          autofocus: true,
          controller: _passwordInputController,
          obscureText: true,
          clipBehavior: Clip.antiAlias,
        ),
        actions: [
          CupertinoDialogAction(
            isDestructiveAction: true,
            onPressed: () => Navigator.of(context).pop(_passwordInputController.text),
            child: Text(S.of(context).accountDeletionConfirmationDelete),
          ),
          CupertinoDialogAction(
            onPressed: () => Navigator.of(context).pop(),
            child: Text(S.of(context).accountDeletionConfirmationCancel),
          ),
        ],
      );
    }
    return AlertDialog(
      title: Text(S.of(context).accountDeletionConfirmationHint),
      content: TextField(
        autofocus: true,
        controller: _passwordInputController,
        obscureText: true,
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
        ),
      ),
      actions: [
        TextButton(
          style: const ButtonStyle(foregroundColor: WidgetStatePropertyAll(Colors.redAccent)),
          onPressed: () => Navigator.of(context).pop(_passwordInputController.text),
          child: Text(S.of(context).accountDeletionConfirmationDelete),
        ),
        TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: Text(S.of(context).accountDeletionConfirmationCancel),
        ),
      ],
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Screenshot 2024-05-18 at 01 05 03

Logs

Logs
nothing suspicious in logs

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.22.0, on macOS 14.4.1 23E224 darwin-arm64, locale en-RU)
    • Flutter version 3.22.0 on channel stable at /Users/nixan/fvm/versions/3.22.0
    • Upstream repository ssh://git@github.com/flutter/flutter.git
    • Framework revision 5dcb86f68f (8 days ago), 2024-05-09 07:39:20 -0500
    • Engine revision f6344b75dc
    • Dart version 3.4.0
    • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nixan/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nixan/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • 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 2023.3)
    • Android Studio at /Users/nixan/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.10+0-17.0.10b1087.21-11572160)

[✓] IntelliJ IDEA Ultimate Edition (version 2024.1.1)
    • IntelliJ at /Users/nixan/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 79.1.3
    • Dart plugin version 241.15989.9

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

[✓] Connected device (5 available)
    • Ицхак Айфонштейн (mobile)       • 00008130-001638C90C88001C            • ios            • iOS 17.4.1 21E236
    • iPhone 15 Pro (mobile)          • 64B81937-2397-4178-8411-62A7F340604C • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-4 (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google Chrome 124.0.6367.208
    ! Error: Browsing on the local area network for Ицхак Айфонштейн. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

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

• No issues found!
@Schefferbird

This comment was marked as duplicate.

@dcarv01

This comment was marked as duplicate.

@dcarv01
Copy link

dcarv01 commented May 18, 2024

  await showCupertinoDialog(
    context: context,
    builder: (BuildContext context) {
      return CupertinoAlertDialog(
        title: Text('A A A A A A A'),
        actions: <Widget>[
          CupertinoDialogAction(
            child: Text('OK'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );

The issue can be reproducible with this simple example only needing any context. In Flutter version 3.19.6, everything works fine, but in version 3.22.0, this distortion occurs.

WhatsApp Image 2024-05-18 at 13 52 24

I am using an real device, iPhone 15 - iOS 17.4

@darshankawar darshankawar added the in triage Presently being triaged by the triage team label May 20, 2024
@danagbemava-nc
Copy link
Member

Reproducible on the latest stable & master. In my testing, this reproduced only with impeller, skia worked just fine. Stable 3.19.5 also worked as expected. This is a regression

Impeller SKIA
code sample
import 'package:flutter/cupertino.dart';

/// Flutter code sample for [showCupertinoDialog].

void main() => runApp(const CupertinoDialogApp());

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(brightness: Brightness.light),
      restorationScopeId: 'app',
      home: CupertinoDialogExample(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('Home'),
      ),
      child: Center(
        child: CupertinoButton(
          onPressed: () {
            Navigator.of(context).restorablePush(_dialogBuilder);
          },
          child: const Text('Open Dialog'),
        ),
      ),
    );
  }

  @pragma('vm:entry-point')
  static Route<Object?> _dialogBuilder(
      BuildContext context, Object? arguments) {
    return CupertinoDialogRoute<void>(
      context: context,
      builder: (BuildContext context) {
        return CupertinoAlertDialog(
          title: Text('A A A A A A A'),
        //  content: const Text('Content'),
          actions: <Widget>[
            CupertinoDialogAction(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('Yes'),
            ),
            CupertinoDialogAction(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('No'),
            ),
          ],
        );
      },
    );
  }
}
flutter doctor -v
[✓] Flutter (Channel stable, 3.22.0, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
    • Flutter version 3.22.0 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5dcb86f68f (11 days ago), 2024-05-09 07:39:20 -0500
    • Engine revision f6344b75dc
    • Dart version 3.4.0
    • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/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.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

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

[✓] Connected device (5 available)
    • Pixel 7 (mobile)                • adb-28291FDH2001SA-5Lv71w._adb-tls-connect._tcp. • android-arm64  • Android 14 (API 34)
    • Nexus (mobile)                  • 00008020-001875E83A38002E                        • ios            • iOS 17.4.1 21E236
    • macOS (desktop)                 • macos                                            • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                            • darwin         • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)                    • chrome                                           • web-javascript • Google Chrome 124.0.6367.208
    ! Error: Browsing on the local area network for Dean’s iPad. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

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

• No issues found!
[!] Flutter (Channel master, 3.22.0-36.0.pre.54, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
    • Flutter version 3.22.0-36.0.pre.54 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 414d923872 (6 hours ago), 2024-05-19 21:58:34 -0400
    • Engine revision c6fecf65fb
    • Dart version 3.5.0 (build 3.5.0-169.0.dev)
    • DevTools version 2.36.0-dev.10
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/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.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

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

[✓] Connected device (5 available)
    • Pixel 7 (mobile)                • adb-28291FDH2001SA-5Lv71w._adb-tls-connect._tcp. • android-arm64  • Android 14 (API 34)
    • Nexus (mobile)                  • 00008020-001875E83A38002E                        • ios            • iOS 17.4.1 21E236
    • macOS (desktop)                 • macos                                            • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                            • darwin         • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)                    • chrome                                           • web-javascript • Google Chrome 124.0.6367.208
    ! Error: Browsing on the local area network for Dean’s iPad. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

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

! Doctor found issues in 1 category.

@danagbemava-nc danagbemava-nc added c: regression It was better in the past than it is now a: typography Text rendering, possibly libtxt c: rendering UI glitches reported at the engine/skia rendering level has reproducible steps The issue has been confirmed reproducible and is ready to work on e: impeller Impeller rendering backend issues and features requests team-engine Owned by Engine team found in release: 3.22 Found to occur in 3.22 and removed in triage Presently being triaged by the triage team labels May 20, 2024
@danagbemava-nc danagbemava-nc changed the title Distorted text in adaptive dialog when displayed Cupertino variant inside Material app [Impeller] Distorted text in Cupertino dialog May 20, 2024
@jonahwilliams jonahwilliams self-assigned this May 20, 2024
@jonahwilliams jonahwilliams added P1 High-priority issues at the top of the work list triaged-engine Triaged by Engine team labels May 20, 2024
@gaaclarke
Copy link
Member

I just checked against 8eba63f29b8b26931496807cb4fc2fed8e4e3258 and it looks fine.

IMG_6973

I also just checked b6971cdf14 and it looks fine. I'm having some technical issues right now but I'll see if I can bisect since this might be the sort of thing we'd want to cherry-pick.

@gaaclarke
Copy link
Member

gaaclarke commented May 22, 2024

I've tried to reproduce it with the steps at #148588 (comment)

engine version: f6344b75dcf861d8bf1f1322780b8811f982e31a
framework version: 0b3a88f

The output looks fine on an iPhone SE 2022
IMG_6975

The screenshot in the description is of the Simulator, is this a Simulator only bug?

@thenixan
Copy link
Author

@gaaclarke no, real device is also affected

@gaaclarke
Copy link
Member

I'm able to reproduce it on the iPhone 15 Pro simulator at f6344b75dcf861d8bf1f1322780b8811f982e31a. Maybe it's particular to that device.

@jonahwilliams
Copy link
Member

could be screen size. / dimensions

@gaaclarke
Copy link
Member

I did a bisect and the first bad framework commit was 60674fa (engine roll #145179). There are just 2 commits to check on that roll.

@jonahwilliams
Copy link
Member

Its probably the round out. @bdero just relanded that in flutter/engine#52973

@gaaclarke
Copy link
Member

I verified that flutter/engine#52973 did fix this issue, thanks @bdero.

@bdero
Copy link
Member

bdero commented May 23, 2024

\o/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a: typography Text rendering, possibly libtxt c: regression It was better in the past than it is now c: rendering UI glitches reported at the engine/skia rendering level e: impeller Impeller rendering backend issues and features requests found in release: 3.22 Found to occur in 3.22 has reproducible steps The issue has been confirmed reproducible and is ready to work on P1 High-priority issues at the top of the work list team-engine Owned by Engine team triaged-engine Triaged by Engine team
Projects
None yet
Development

No branches or pull requests

8 participants