Does anyone know why there's a small white line padding here when I'm dimming and scaling the `Box`?...

# compose

[robercoding]

Does anyone know why there's a small white line padding here when I'm dimming and scaling the Box?

I have a background Box with Color.Black.copy(0.5f) and another Box on top of it with Color.White and some more padding. (Acting like a Card)

When I click on the top box: It scales out to 0.7f and dim with the same color value as the background box (Color.Black.copy(0.5f)) and seems like there's a white line separating both components, like the background doesn't fill the whole "Top box"

I'm attaching a video and a sample project in the 🧵

Edit: "Partially solved" - add .border(0.dp, dimOverlay) 😅

[robercoding]

white-line-box.mp4

white-line-box.mp4

[robercoding]

IssueTrackerWhitePadding.zip

IssueTrackerWhitePadding.zip

[robercoding]

I haven't submitted anything yet to the issue tracker because I don't know if it's my fault or Compose

[robercoding]

Ahh.. It seems that it also happens with pure Black color.

black.mp4

[robercoding]

Aha but if I don't scale then this doesn't happen 🤔

pure-black-no-scale.mp4

[robercoding]

So doing some tricks I see it works, but of course this solution CAN'T BE APPLIED to all the devices

instead of drawRect(cardOverlay) use:

drawRect(cardOverlay, topLeft = Offset(-0.2f, -0.5f),size = Size(this.size.width + 0.5f, this.size.height + 1))

solution.mp4

[robercoding]

Looks like something is wrong when drawing again after scaling it

[robercoding]

If I don't use scale method and instead use width(((screenWidthDp - 24.dp) * scaleValue).dp)

And the same for height, it doesn't show any white line. Of course I want to also scale the children so it's not a good option

scale-width-height.mp4

[robercoding]

Would be nice if someone from Compose team could tell me if I'm doing something wrong or if the scaling is not behaving as expected

[robercoding]

Alright so not sure how I didn't think of it before but just add:
.border(0.dp, dimOverlay)

[robercoding]

You can still spot the border, but looking better than before 🙂

Looks like border is still applied even though you set it to 0

black-border.mp4

[robercoding]

And if you add some elevation , it kinda makes up that border and fits nicely
I'm not happy with the result but can't find a better solution 😅

elevation-border-0.mp4

[robercoding]

Reported the issue: https://issuetracker.google.com/issues/266182537