Text anti-aliasing broken in Flutter 3.3.0

[HaijunWei]

Text or Container border looks jagged on Android, normal on Apple.

Not all pages will be jagged, such as the following code, the comment Divider can be displayed normally.
Or modify the height of _Statistics to display normally. On my device height 10 or 86 reproduces the problem.

On my device this problem only occurs with scrollable components.

Code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: CupertinoButton(
          child: const Text('Click'),
          onPressed: () {
            Navigator.of(context).push(CupertinoPageRoute(
              builder: (context) => const Page1(),
            ));
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: CustomScrollView(
        slivers: [
          const _Statistics(),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return Container(
                  margin: const EdgeInsets.fromLTRB(16, 0, 16, 10),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Column(
                    children: const [
                      Text(
                        'BTC Staking',
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Text(
                        '0.2 BTC',
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      Text(
                        '0 BTC Earns',
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                          color: Color(0xFF35B589),
                        ),
                      ),
                      Text(
                        '0 BTC Earns',
                        style: TextStyle(
                          fontSize: 14,
                          color: Color(0xFF35B589),
                        ),
                      ),
                      Divider(),
                    ],
                  ),
                );
              },
              childCount: 1,
            ),
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SliverToBoxAdapter(
      child: Container(
        height: 10,
        color: Colors.red,
      ),
    );
  }
}

Flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.0, on macOS 12.4 21F79 darwin-arm, locale
    zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.70.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

• No issues found!

Device

Brand: Xiaomi Civi
Screen size: 6.5 inch
Resolution: 2400 * 1080

[seanharding]

I've been having some similar problems, but on iOS. Been trying to narrow it down enough to submit a bug report. Earlier I had one where there were a bunch of TextButtons embedded into a GridView. Replacing the TextButton with a GestureDetector + Padding solved the problem in that case. But I'm not confident that I have figured out the root cause, and I have seen reports of similar problems in other parts of my app that involve neither TextButtons nor GridViews.

One thing I noticed in the GridView case is that it seemed to initially render ok for the parts that were on-screen, but as soon as I scrolled, the stuff that was off-screen looked jaggedy, and scrolling back up, the part that was originally on-screen looked jaggedy too. Also for some reason in this specific case, it seemed like only one column of items in the GridView was affected. (I know this all seems random, and that's why I didn't file an Issue of my own until I isolated the problem more. But I wanted to throw it out there in case it helps.)

[seanharding]

Here's a screenshot where you may be able to see that the item in the third column has this aliasing issue. It's not just the text, but also the border on the Container.

[HaijunWei]

Here's a screenshot where you may be able to see that the item in the third column has this aliasing issue. It's not just the text, but also the border on the Container.

Yes, I just found that the border will also have jaggedness, and the problem has been supplemented.

[elliotrtd]

I have also found the same with AlertDialogs. The dialog itself, title and content all had the same issue. This was on Android - I'm not able to test on iOS currently.

I'm going to see if I can reproduce this at all in a very basic app to provide some code.

For anyone else with the same - in one case switching to a SimpleDialog and adding a row with the actions I wanted below worked for the content. May help but ultimately did not 100% for me.

Edit: Thanks to the comment from nimr77 below I have solved this for all by setting the AlertDialog to scrollable

[bleroux]

@jonahwilliams Could this issue be related to fractional support? #107733 (comment)
It seems somewhat similar to what @jpnurmi described on desktop: #107733 (comment)

[exaby73]

I can't really reproduce this issue on my Windows machine (1080p, 15" screen) or my Macbook Air M1 or any emulators I am trying to run. Labelling for further insights from the team.

[seanharding]

Just to be clear, this is labeled platform-android, but I am seeing this (and my screenshot above is) on iOS. Similar to @elliotrtd, I have also had testers show me screenshots of the problem in AlertDialogs (again, on iOS).

For now we are rolling back to 3.0.5 but I will continue watching this Issue for updates…

[nimr77]

It's on the web and desktop too, in my case I had to wrap the column that has the Text widget with SingleChildScrollView

[seanharding]

This code below reproduces it for me. It renders correctly initially, but if you scroll down to push the text up and under the app bar, when you let go, part of it comes back pixelated (on my simulator iPhone 13 Mini, it's the 3rd item only). If I change the padding amount in the Padding widget to 0, the problem does not seem to happen. Padding of even 1 does cause it to happen (I have not exhaustively tested all padding values to see if some reproduce it and some don't, but 0 does not, while 1 and 8 do).

The larger text size is not required, but does make it easier to see the issue.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Issue 110738"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              childAspectRatio: 0.7,
              crossAxisSpacing: 4,
              mainAxisSpacing: 0),
          itemCount: 4,
          itemBuilder: (BuildContext ctx, index) {
            return TextButton(
              onPressed: () => print("Pressed"),
              child: Container(
                child: AspectRatio(
                  aspectRatio: 1,
                  child: Text(
                    "Hello, World",
                    style: TextStyle(fontSize: 24),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

[elliotrtd]

It's on the web and desktop too, in my case I had to wrap the column that has the Text widget with SingleChildScrollView

@nimr77 That's helped with the AlertDialog issue too! If I set the AlertDialog to scrollable: true then the issue is not visible. Thanks!

[liu731]

[Flutter 3.3.0] Reproduce a specific device and complex Widget Tree

Device parameters:
device Redmi Note 9(M2010J19SC)
processor Qualcomm Snapdragon 662
resolution 2340*1080
android 11

Looks like

1. The rounded corners (Clip.hardEdge) have obvious jaggedness and exceed the specified size range
2. Image and Text are blurry
3. Appears to shake left and right when scrolling

If run with "--enable-software-rendering", everything is solved. But this is not acceptable.

Unable to reproduce on iPhone 12 and some other Android devices

[moffatman]

I believe it's caused by pixel snapping being removed. I have used this change in local engine to fix, but I guess it's not appropriate to merge? flutter/engine#35538

[armandojimenez]

Happens in my app using AlertDialogs only on iOS, does not happen in 3.0.5

[armandojimenez]

Some images:
Flutter 3.0.5

Flutter 3.3

This is only on iPhone, also, it happens to some SVGs

Also happens on Master.
Another thing is, if you put the app on background and then come back, you can see the text like moving, its really weird

[nimr77]

Some images:

Flutter 3.0.5

Flutter 3.3

This is only on iPhone, also, it happens to some SVGs

Also happens on Master.

Another thing is, if you put the app on background and then come back, you can see the text like moving, its really weird

Try to change the filter quality to medium or low, mostly it's the case on png or SVG

[GiacomoPignoni]

I'm also experimenting something similar with CustomPainter, that is inside a CustomScrollView.
The screenshot are from Windows build, but I have the same issues on iOS and Android.

3.0.5

3.3.0

[AlexV525]

Can anyone do git bisect for the framework with the reproducible example to determine which is the first bad commit?

[jpnurmi]

Fixed by:

• add pixel snapping conditional on presence of raster cache engine#35981 (CP: #111231)
• [framework] revert removal of opacity #111202 (CP: #111208)

[NikosTsesmelis]

@jpnurmi Is this coming as a hotfix?

[jpnurmi]

Yes, here are the cherry-picks:

• [CP] revert removal of opacity layers #111208 (#111207)
• [CP] Add pixel snapping conditional on presence of raster cache #111231 (#36022)

[goderbauer]

Closing this based on #110738 (comment).

[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.