can someone please tell me why this happens, I tri...

# compose

[Othman El Jazouli]

can someone please tell me why this happens, I tried playing with clip and bunch of other ways and always end up with this, btw there is a reason both have bg colors, it’s part of a bigger thing but i had to narrow it down to find out what’s causing it, ended up with this bit. appreciate if someone can help.
thanks!

Box(
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.Red, RoundedCornerShape(16.dp)),
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.Yellow)
    ) {
        Spacer(modifier = Modifier.size(40.dp))
    }
}

or

Surface (
    modifier = Modifier
        .fillMaxWidth(),
    color = Color.Red,
    shape =  RoundedCornerShape(16.dp),
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.Yellow)
    ) {
        Spacer(modifier = Modifier.size(40.dp))
    }
}

[Othman El Jazouli]

in the same context, trying to overlap 2 boxes

@Composable
private fun Preview() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Yellow)
            .padding(20.dp)
    ) {
        Box {
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(Color.Red)
            )
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(Color.Yellow)
            ) 
        }
    }
}

gives a red square, as if the red square behind is leaking color or the yellow square in front is not 100dp - any clue why compose draws like this?

[ephemient]

anti-aliasing - the edges are a row of partly-transparent pixels, and they mix when overlapped

[Othman El Jazouli]

any idea how i can fix it?

[ephemient]

don't do that

[Othman El Jazouli]

im working on a swipe to delete, and so the box on top is showing those borders of the actions behind it which has a bg

[ephemient]

you could use a mask to clip the lower layer to only the part that the upper layer isn't covering

[ephemient]

this is a thing that happens with any shape that's not pixel aligned (not just compose), https://community.adobe.com/t5/illustrator-discussions/strange-border-between-objects-of-same-color/m-p/12404817

[Othman El Jazouli]

ooh i see! thanks for the tip

[Othman El Jazouli]

i was able to fix it in 15min after spending multiple hours. thanks!

[Thomas Hormes]

@Othman El Jazouli how did you fix it?

[Othman El Jazouli]

hey ill share the code once im home

[Othman El Jazouli]

@Thomas Hormes sorry i completely forgot about this, here what i did

// antialiasing fix - 2 overlapping views with solid bg will have artifacts on the edges
// using a mask to show the part that is revealed
.drawWithContent {
    withTransform({
        clipRect(
            top = 0F,
            bottom = size.height,
            left = size.width - revealedWidth,
            right = size.width
        )
    }) {
        [e-mail]()
    }
},