Circular-shaped decorations are not properly clipped

Steps to Reproduce

I'm getting visual glitches using this widget structure:

new Container(
      decoration: new BoxDecoration(
        color: color,
        shape: BoxShape.circle,
        border: new Border.all(
          color: Colors.white,
          width: 2.5,
        ),
      ),
      child: new Center(
        child: new Text(
          "$index",
          style: theme.textTheme.body1.apply(color: textColor),
        ),
      ),
    );

As you can notice, the background color of the decoration is slightly overflowing the circular border. I've tried in different ways (e.g. using ClipOval) but the result is always the same.

I think this behaviour, even if intended, is not what a developer/designer would expect.

Is there a way to properly achieve the expected result?

Thanks

Yeah that's not good.

Btw, this issue is happening almost in the same way using native iOS Sdk. The reason there is because of anti-aliasing, I don't know if in this case it's the same.

Oh it's definitely just antialiasing. But we should do better. (For example, maybe we can shrink the background color paint by half the border width or something.)

@Hixie

@Hixie If you shrink the background color paint by half the border width, this will be visible when the border is semi-transparent. You should, instead, shrink it by a single real pixel. The antialias problem always happens within one single real pixel (real device pixel, not logical pixel). That's also why this problem is less visible when the device resolution is larger.

We can't really shrink by one pixel; we don't know what the transformation matrix is.

I see. We've been fixing antialias problems, usually gaps, in some places where there is no transformation, or where we know the transformation. That's not fixable then, since if you do what you said the shrinking of the background color will be visible when the border is semi-transparent. Or maybe you only do this if the border color is not transparent. Or you add a flag.

Yeah...

We might be able to improve this at a lower level maybe, too.

@Hixie

this issue still there, @Hixie did you guys find a fix?

Very annoying bug. I often want to do something like this in order to make circular button but cant do because of this problem with edges:

return InkWell(
      onTap: callback,
      child: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Image.asset(
          'assets/images/someimage.png',
          fit: BoxFit.cover,
        ),
      ),
    );

Similar thing happens if using flutter's CircleAvatar - there are still image leftovers over Container's border

CircleAvatar(
  backgroundImage: AssetImage(
      "assets/someimage.png"),
  child: Container(
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      border: Border.all(
        color: Colors.white,
        width: 5.0,
      ),
    ),
  ),
)

@Hixie

@Hixie I have non-smooth round corners in Android Tablet is it the same issue or I need to open a different issue?
Check "Continue button" and the CustomClipper for green arrow and red arrow
Tablet Info: API 22, DPI 210, Width 800px, Height 1280

My button code:

RaisedButton(
            padding: EdgeInsets.symmetric(
                vertical: AppFonts.localePadding(context, 10),
                horizontal: AppFonts.localePadding(context, 100)),
            color: AppColors.primary,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30),
                side: BorderSide(color: AppColors.textBlack, width: 1,style: BorderStyle.solid)),
            child: Text(
              'Continue',
              style: TextStyle(
                  color: AppColors.textBlack,
                  fontSize: AppFonts.localeSize(context, 18),
                  fontFamily: AppFonts.localeFont(context)),
            ),
            onPressed: () {},
          )

@gspencergoog

I see. Well, that's the comment that was followed by this one:

They're pretty trivial, so as long as we can say that they are more correct now than they were, I'm OK with approving them.

So I think those (as well as the other changes like them) are the changes that he was referring to in that later comment.

If the reply to those changes is, "I tried and couldn't reproduce a change like those locally; but they are visually trivial, and the new versions don't look any worse to me than the old versions, and I think in principle they should be more correct because the new logic in the PR is more correct", then my guess based on the thread is that @gspencergoog (and any other Googlers involved) would have been happy with that answer.

Looking at those screenshots myself, I'd definitely say they're visually trivial and that the new versions don't look any worse than the old. I haven't closely read the logic in the PR, but presumably you think it is indeed more correct. So if you tried to reproduce similar changes and couldn't, then I think that's probably all the debugging that is needed.

The main issue is not that they look odd or wrong, just "are you sure your change should happen here?" and I'm not sure. I wish I could debug to be sure, there is a 75% chance that's a bug, but I can't debug it.

OK, I guess it comes down to that estimate of whether it's a bug. If you think it probably really is a bug in the PR, then I agree it should be fixed before merging, and it's frustrating that the repro case for the bug isn't accessible.

FWIW my guess would be that it's not a bug. Those three gray "1", "2", "3" boxes don't visibly have borders… but they might still have a _decoration.shape that's an OutlinedBorder, say, just with a border that's the same color as the interior. Based on the code in the PR, it seems like something like that has to be the case in order for it to have an effect.

And then once the new logic gets involved, it's expected that it may cause small rounding differences that make visually imperceptible changes in the output.

We were actually pretty close, I was OK with just approving those diffs, I just wanted to make sure they were expected. If you want help with the Google testing side, I can look at them and approve if they're still trivial. I doubt many other customers do golden tests, but we can deal with them if they do (and if they do, you can reproduce it there).

@gnprice

Could be. If @gnprice thinks that's not a bug, I can resubmit the PR. My brain melted thinking "is that a bug or not?" and I couldn't find an answer, then I gave up.

@gspencergoog

Yeah, I can't claim to be sure of it, but my assessment is that it's probably not a bug. A resubmitted version of the PR sounds great!

If we want to get to a higher degree of certainty that those golden diffs aren't telling us about some way in which the code isn't behaving how it's intended to, then since you've already tried and been unable to reproduce the behavior locally, probably the most effective next step would be for @gspencergoog or another Googler to dig into one of those test cases that doesn't visually have a border and confirm that the widgets do express a border after all. (And the border is just very thin, or the same color as the interior or exterior, or for some other reason doesn't appear visually.) But personally I'd be comfortable skipping that step.

Fix anti-aliasing when painting borders with solid colors. (#153365)

Fix anti-aliasing when painting borders with solid colors. (flutter#1…

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.

Fix anti-aliasing when painting borders with solid colors. (flutter#1…

Fix anti-aliasing when painting borders with solid colors. (#153365)

Navigation Menu

Repository navigation

Circular-shaped decorations are not properly clipped #13675

Steps to Reproduce

43 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Circular-shaped decorations are not properly clipped #13675

Description

Steps to Reproduce

Activity

Hixie commented on Dec 19, 2017

sroddy commented on Dec 19, 2017

Hixie commented on Dec 19, 2017

marcglasberg commented on May 21, 2018

Hixie commented on May 21, 2018

marcglasberg commented on May 21, 2018

Hixie commented on May 21, 2018

Mahmoud2B commented on Oct 9, 2018

fralways commented on Apr 3, 2019

amreniouinnovent commented on Jul 16, 2019

43 remaining items

gnprice commented on Aug 12, 2024

bernaferrari commented on Aug 12, 2024

gnprice commented on Aug 12, 2024

gspencergoog commented on Aug 12, 2024

bernaferrari commented on Aug 12, 2024

gnprice commented on Aug 13, 2024

github-actions commented on Aug 30, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions