When using `Card` with a `backgroundColor` that has an alpha value (i.e. not 00 and not FF) I’m seei...

# compose

[julioromano]

When using Card with a backgroundColor that has an alpha value (i.e. not 00 and not FF) I’m seeing visual artefacts in the form of a border around the card.
See attached image (code in 🧵), is this working as intended or is this a bug?

[julioromano]

@Composable
fun CardColorAlphaGlitch() {
    Column(
        modifier = Modifier
            .background(Color(0xFFFFFFFF))
            .padding(16.dp)
            .width(200.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Card(backgroundColor = Color(0x80283593)) {
            Text(
                text = "This card has a background with alpha",
                modifier = Modifier.padding(16.dp)
            )
        }
        Card(backgroundColor = Color(0xFF283593)) {
            Text(
                text = "This card has a background without alpha",
                modifier = Modifier.padding(16.dp)
            )
        }
    }
}

[Louis Pullen-Freilich [G]]

This is because of the elevation that Card has by default, if you remove the elevation this won't happen

[Timo Drick]

Yes unfortunatley the shadow is only drawn at the boarder of the shape. Not sure if this is a bug or a feature.

[julioromano]

But the point of using a card was because of elevation and shadow.

[Timo Drick]

Maybe there should be some kind of clipping that the shadow is not drawn under the shape.

[Gabriel Melo]

Shouldn't the shadow cast by something semitransparent also be semitransparent?

[Andrey Kulikov]

This is how shadows are drawn by RenderNodes unfortunately. The same would happen if you set elevation and semitransparent background for a View. There is a possible workaround to convert semitransparent color to the non transparent one if you know the intended background below the Card. for example in this case you can do backgroundColor = Color(0xFF283593).compositeOver(Color.White)

[alorma]

better approach:

backgroundColor = Color(0xFF283593).compositeOver(MaterialTheme.colors.surface)

SO it composites over white or black, or whatever your current surface color is