title: Android compose Card has a border when semi-transparent colors used
body: <p>Android Jetpack compose <code>Card</code> draws a border around the card when background color has some transparency. This is how it looks in AS:</p>
  <p><a href="https://i.stack.imgur.com/xA0ZP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xA0ZP.png" alt="enter image description here" /></a></p>
  <p>But this is how it looks in the app:</p>
  <p><a href="https://i.stack.imgur.com/vnui1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vnui1.png" alt="enter image description here" /></a></p>
  <p>If I set background to a solid color it works, but by default <code>backgroundColor</code> is a surface color from material (in my app <code>val white850 = Color(0xD9FFFFFF)</code>) and it looks like on the picture above.</p>
  <pre><code>@Composable
  fun TraitCard(trait: Trait) {
      Card(
          shape = MaterialTheme.shapes.small,
          modifier = Modifier.size(width = 192.dp, height = 56.dp)
      ) {
          Row(
              verticalAlignment = Alignment.CenterVertically,
              horizontalArrangement = Arrangement.Start
          ) {
              Icon(
                  imageVector = Icons.Rounded.ChildFriendly,
                  contentDescription = &quot;&quot;,
                  modifier = Modifier
                      .fillMaxHeight()
                      .background(color = MaterialTheme.colors.background)
                      .aspectRatio(1f)
                      .padding(8.dp),
                  tint = MaterialTheme.colors.onBackground
              )
              Text(
                  text = trait.name,
                  style = MaterialTheme.typography.h3,
                  modifier = Modifier.padding(horizontal = 16.dp),
              )
          }
      }
  }
  </code></pre>
  <p>Does anyone have a clue why it's happening?</p>