Applying .cornerRadius results in artifacts on view corners

I have a ZStack with the following layers

1. background color
2. image layer (optional, if the data representing the item contains an image url)
3. text that has a background behind it

When attempting to apply either the .cornerRadius or .clipShape modifier, the background seems to "peek through" the top layer (very faintly, but very noticeable on-device). I am not sure what I am doing wrong. Any help would be appreciated. Code and partial screenshot are below. Note that you may need to zoom in on the screenshot. It's quite noticeable on-device though.

ZStack(alignment: .bottomLeading) {

    Color.gray
    if let image = recipe.thumbnailImage {
        RemoteImageView(url: image.makeUrl(withResolution: .thumbnail))
        .aspectRatio(contentMode: .fill)
        .flexibleFrame()
    }

    VStack(alignment: .leading, spacing: Spacing.small) {
        Spacer()
        VStack(alignment: .leading, spacing: 4) {
            Text("\(recipe.likes)")
            Text(recipe.name)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(8)
        .background(
            LinearGradient(gradient: Gradient(stops: [
                Gradient.Stop(color: .clear, location: 0),
                Gradient.Stop(color: Color(.secondarySystemBackground), location: 0.45),
                Gradient.Stop(color: Color(.secondarySystemBackground), location: 1)
                 ]), startPoint: .top, endPoint: .bottom)
        )
     }
}
.aspectRatio(0.75, contentMode: .fill)
// .cornerRadius(8)
.clipShape(RoundedRectangle(cornerRadius: 8))