Is there anything we can do about the `Modifier.border` antialiasing when using the circle shape? I ...

# compose

[dewildte]

Is there anything we can do about the Modifier.border antialiasing when using the circle shape?
I get this subtle ring around the image.
Example in 🧵

[dewildte]

For example:

[dewildte]

Code used:

val avatarModifier = modifier
            .clip(CircleShape)
            .size(avatarSize)
            .border(style.borderSize, color = style.borderColor ?: Color.Transparent, shape = CircleShape)

[annsofi]

The only workaround I’ve seen is to add a 1.dp padding before adding the border (I think, let me find the bug report I saw this in again)

[annsofi]

This is the one I was thinking of: https://issuetracker.google.com/issues/228985905

[annsofi]

I don’t think the problem is just for surface though because I’ve seen the same thing as you do

[dewildte]

Thanks a ton @annsofi!
Sadly no fix has been made for this.

[Tobias Suchalla]

The order of your modifiers matters since in this order you are clipping your circle border.
If you specify the border first, only the content gets clipped (which is fine since your border already is a circle).

The difference is subtle but might be worth looking into:

fun test() = singleWindowApplication {
    MaterialTheme {
        Box(Modifier.fillMaxSize(), Alignment.Center) {
            Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
                Box(
                    Modifier
                        .clip(CircleShape)
                        .size(48.dp)
                        .border(1.dp, Color.Red, CircleShape)
                )

                Box(
                    Modifier
                        .border(1.dp, Color.Red, CircleShape)
                        .clip(CircleShape)
                        .size(48.dp)
                )
            }
        }
    }
}

Which produces the attached circles (second image shows the difference).